[CLD-613] Update style app modal (#243)

* [CLD-613] Update style app modal * [CLD-613] App information only visible on developer modal
reapit · Jan 7, 2020 · 12d6b14 · 12d6b14
1 parent b538172
commit 12d6b14
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 28 deletions.
diff --git a/src/components/ui/__tests__/__snapshots__/app-detail.tsx.snap b/src/components/ui/__tests__/__snapshots__/app-detail.tsx.snap
@@ -27,24 +27,26 @@ exports[`AppDetailModalInner should match a snapshot 1`] = `
             <H6 />
           </div>
         </Tile>
-        <p>
-          App Information
-        </p>
-        <div>
-          <p>
-            App ID:
-          </p>
-          <p />
-        </div>
-        <div>
-          <p>
-            Status:
-          </p>
+        <React.Fragment>
           <p>
-            Not listed
+            App Information
           </p>
-          <FaTimes />
-        </div>
+          <div>
+            <p>
+              App ID:
+            </p>
+            <p />
+          </div>
+          <div>
+            <p>
+              Status:
+            </p>
+            <p>
+              Not listed
+            </p>
+            <FaTimes />
+          </div>
+        </React.Fragment>
         <br />
         <p />
         <br />

diff --git a/src/components/ui/app-detail.tsx b/src/components/ui/app-detail.tsx
@@ -111,19 +111,21 @@ export const AppDetail: React.FunctionComponent<AppDetailProps> = ({
                 <H6>{developer}</H6>
               </div>
             </Tile>
-            <p className={styles.appInfo}>App Information</p>
-            <div key="app-id" className={styles.appInfoRow}>
-              <p className={styles.appInfoProperty}>App ID:</p>
-              <p>{id}</p>
-            </div>
             {isCurrentLoggedUserDeveloper && (
-              <div key="app-listed" className={styles.appInfoRow}>
-                <p className={styles.appInfoProperty}>Status:</p>
-                <p className={styles.appInfoSpace}>{isListed ? 'Listed' : 'Not listed'}</p>
-                {isListed ? <FaCheck className={styles.isListed} /> : <FaTimes className={styles.notListed} />}
-              </div>
+              <>
+                <p className={styles.appInfo}>App Information</p>
+                <div key="app-id" className={styles.appInfoRow}>
+                  <p className={styles.appInfoProperty}>App ID:</p>
+                  <p>{id}</p>
+                </div>
+                <div key="app-listed" className={styles.appInfoRow}>
+                  <p className={styles.appInfoProperty}>Status:</p>
+                  <p className={styles.appInfoSpace}>{isListed ? 'Listed' : 'Not listed'}</p>
+                  {isListed ? <FaCheck className={styles.isListed} /> : <FaTimes className={styles.notListed} />}
+                </div>
+                {authFlow === AuthFlow.CLIENT_SECRET && id && <AppAuthenticationDetail appId={id} />}
+              </>
             )}
-            {authFlow === AuthFlow.CLIENT_SECRET && id && <AppAuthenticationDetail appId={id} />}
             {carouselImages.length > 0 && (
               <div className={carouselStyles.container}>
                 <Slider {...settings}>

diff --git a/src/styles/blocks/app-detail.scss b/src/styles/blocks/app-detail.scss
@@ -1,5 +1,5 @@
 .permission {
-  text-decoration: underline;
+  font-weight: 600;
 }
 
 .permissionList {