Fixed search button width (#10)

openmrs · Sep 25, 2019 · 1a902e3 · 1a902e3
1 parent fc47c8e
commit 1a902e3
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 18 deletions.
diff --git a/src/dashboard/home-dashboard.component.css b/src/dashboard/home-dashboard.component.css
@@ -1,20 +1,22 @@
 .homeDashboard {
-  height: calc(100vh - var(--omrs-topnav-height) - 2rem);
+  height: calc(100vh - var(--omrs-topnav-height) - 10rem);
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  justify-content: center;
   margin: 0 auto;
 }
 
 .mainSection {
   min-height: 60vh;
   display: flex;
+  justify-content: center;
   align-items: center;
+  flex-grow: 1;
 }
 
 .label {
   color: var(--omrs-color-interaction);
   margin-left: 0.25rem;
+  text-align: center;
 }
 
 .logoSection {
@@ -23,3 +25,17 @@
   align-items: center;
   height: 100%;
 }
+
+@media only screen and (min-width: 720px) {
+  .dashboardLink {
+    width: 40%;
+    justify-content: center;
+  }
+}
+
+@media only screen and (max-width: 720px) {
+  .dashboardLink {
+    width: 80%;
+    justify-content: center;
+  }
+}
diff --git a/src/dashboard/home-dashboard.component.tsx b/src/dashboard/home-dashboard.component.tsx
@@ -5,26 +5,28 @@ import { UserHasAccessReact } from "@openmrs/esm-api";
 
 export default function HomeDashboard(props: HomeDashboardProps) {
   return (
-    <div className={styles.homeDashboard}>
-      <section className={styles.mainSection}>
-        <UserHasAccessReact privilege="View Patients">
-          <Link
-            to={props.match.url + "/patient-search"}
-            className="omrs-link omrs-outlined-action omrs-rounded"
-          >
-            <svg className="omrs-icon" fill="var(--omrs-color-interaction)">
-              <use xlinkHref="#omrs-icon-search" />
-            </svg>
-            <span className={styles.label}>Search for patient</span>
-          </Link>
-        </UserHasAccessReact>
-      </section>
+    <>
+      <div className={styles.homeDashboard}>
+        <section className={styles.mainSection}>
+          <UserHasAccessReact privilege="View Patients">
+            <Link
+              to={props.match.url + "/patient-search"}
+              className={`omrs-link omrs-outlined-action omrs-rounded ${styles.dashboardLink}`}
+            >
+              <svg className="omrs-icon" fill="var(--omrs-color-interaction)">
+                <use xlinkHref="#omrs-icon-search" />
+              </svg>
+              <span className={styles.label}>Search for patient</span>
+            </Link>
+          </UserHasAccessReact>
+        </section>
+      </div>
       <section className={styles.logoSection}>
         <svg>
           <use xlinkHref="#omrs-logo-full-mono" />
         </svg>
       </section>
-    </div>
+    </>
   );
 }