restyled github image

libs/remix-ui/git/src/components/github/devicecode.tsx

@@ -108,20 +108,27 @@ export const GetDeviceCode = () => {
       {
         (context.gitHubUser && context.gitHubUser.login) ?
           <div className="pt-2">
-            <Card>
-              <Card.Body className="p-2">
-                <div className="mb-1" data-id={`connected-as-${context.gitHubUser.login}`}>Connected as {context.gitHubUser.login}</div>
-                <Card.Text>
-                  <img data-id={`connected-img-${context.gitHubUser.login}`} src={context.gitHubUser.avatar_url} className="w-25" />
-                  <br></br>
-
-                  <a data-id={`connected-link-${context.gitHubUser.login}`} href={context.gitHubUser.html_url}>{context.gitHubUser.html_url}</a>
+
+            <div className="mb-1" data-id={`connected-as-${context.gitHubUser.login}`}>Connected as {context.gitHubUser.login}</div>
+            <div className="row">
+              {context.gitHubUser.avatar_url ?
+                <div className="col-6">
+                  <img data-id={`connected-img-${context.gitHubUser.login}`} src={context.gitHubUser.avatar_url} className="w-100" />
+                </div> : null}
+            </div>
+            <div className="row mt-2">
+              <div className="col-6">
+                {context.gitHubUser.html_url ? <>
+                  <label className="text-uppercase">user on github:</label>
+                  <a data-id={`connected-link-${context.gitHubUser.login}`} href={context.gitHubUser.html_url}>{context.gitHubUser.html_url}</a> </> : null}
+                {context.userEmails && context.userEmails.length > 0 ? <>
+                  <label className="text-uppercase mt-2">email:</label>
                   {context.userEmails && context.userEmails.filter((email: any) => email.primary).map((email: any) => {
                     return <span key={email.email}><br></br>{email.email}</span>
-                  })}
-                </Card.Text>
-              </Card.Body>
-            </Card>
+                  })}</> : null}
+              </div>
+            </div>
+
 
           </div> : null
       }