Merge pull request #86 from treehousedev/search-and-css-cleanup

move inline styles to main.css for search bar and clean up main.css
treehousedev · Apr 14, 2023 · aa979f9 · aa979f9
2 parents b32256e + 0cf61d2
commit aa979f9
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 54 deletions.
diff --git a/deno.lock b/deno.lock
diff --git a/lib/ui/search.tsx b/lib/ui/search.tsx
@@ -87,37 +87,19 @@ export const Search: m.Component = {
 
 
     return (
-      <div class={(state.results.length > 0)?"search active":"search"} style={{position: "relative", display: "flex", flexGrow: "1",  marginLeft: "var(--padding)", marginRight: "var(--padding)"}}>
-        <div style={{
-            width: "95%",
-            padding: "calc(var(--padding)/2)",
-            margin: "calc(var(--padding)/-2)",
-            borderRadius: "0.25rem",
-            border: (state.results.length > 0)?"1px solid var(--dark)":"none",
-            position: "absolute",
-            zIndex: (state.results.length > 0)?"100":"1",
-            background: (state.results.length > 0)?"white":null
-          }}>
+      <div class={(state.results.length > 0)?"search active":"search"} style={{position: "relative", display: "flex", flexGrow: "1"}}>
+        <div>
           <div class="flex" style={{margin: (state.results.length > 0)?"0":"1px"}}>
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
             <input type="text" placeholder="Search" value={state.query} onkeydown={onkeydown} oninput={autocomplete} style={{
-              width: "99%", 
               border: "0", 
               outline: "0", 
               background: "transparent", 
-              marginLeft: "var(--1)",
-              marginRight: "var(--padding)",
-              fontSize: "14px",
-              fontWeight: "600",
               paddingTop: "3px"}} />
           </div>
           {(state.results.length > 0)?
             <div class="results" style={{
-              marginLeft: "20px",
-              paddingLeft: "var(--1)",
-              marginTop: "0.25rem",
               overflowX: "hidden",
-              fontWeight: "400",
               overflowY: "auto",
               maxHeight: "400px"
             }}>

diff --git a/web/static/app/main.css b/web/static/app/main.css
@@ -5,9 +5,58 @@
   --font: 'Figtree', sans-serif;
 }
 
+/*------------GLOBAL APP STYLES------------*/
 
+body {
+  zoom: 1;
+  margin: 0;
+  height: 100%;
+  background: var(--background);
+}
+body, input, textarea, button {
+  color: var(--black);
+  font-size: 1rem;
+  font-family: var(--font);
+  font-weight: var(--weight-regular);
+}
 
 
+/*------------SEARCH------------*/
+.search {
+  border: none;
+  background: none;
+  margin: 0 var(--padding);
+}
+.search > div {
+  width: 95%;
+  padding: calc(var(--padding)/2);
+  margin: calc(var(--padding)/-2);
+  position: absolute;
+}
+.search.active > div {
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background: var(--white);
+  z-index: var(--layer-top);
+}
+.search .results {
+  margin-top: var(--padding);
+  font-weight: var(--weight-regular);
+}
+.search .results > div {
+  padding: calc(var(--padding)/2);
+  line-height: var(--body-line-height);
+}
+.search input {
+  width: 99%;
+  margin: 0 var(--padding) 0 var(--1);
+  font-weight: var(--weight-semibold);
+  font-size: var(--text-small);
+}
+.palette .selected, .search .selected {
+  background: var(--gray-200);
+  border-radius: var(--border-radius);
+}
 
 
 /* TO REVIEW OR REMOVE */
@@ -21,29 +70,11 @@ main {
   background-color: var(--white);
 }
 
-
 input::placeholder {
   opacity: 1;
   color: var(--dark);
 }
 
-body, input, textarea, button {
-  color: #444;
-  font-size: 1rem;
-  font-family: var(--font);
-  font-weight: 400;
-}
-
-body {
-  zoom: 1;
-  margin: 0;
-  /* font-family: 'Recursive', sans-serif; */
-  font-family: var(--font);
-  color: #444;
-  height: 100%;
-  background: var(--background);
-}
-
 .menu li:not(.disabled):hover {
   background: #666;
   color: white;
@@ -54,34 +85,23 @@ body {
   cursor: pointer;
 }
 
-.palette .selected, .search .selected {
-  background: #666;
-  color: white;
-  border-radius: 0.25rem;
-}
-
 hr {
   border: 0;
-  border-bottom: 1px solid var(--dark);
+  border-bottom: 1px solid var(--border-color);
 }
 
 button {
-  border-radius: 0.25rem;
+  border-radius: var(--border-radius);
   background-color: white;
-  border: 1px solid var(--dark);
+  border: 1px solid var(--border-color);
   cursor: pointer; 
 }
 
-.search .results > div {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
 .\? { border: 1px solid red !important; }
 
 
 
-
+/*------------LOADING ANIMATION------------*/
 .lds-ripple {
   display: inline-block;
   position: absolute;

diff --git a/web/static/style/design.css b/web/static/style/design.css
@@ -75,6 +75,13 @@
   --h1-size: var(--12);
   --h2-size: var(--8);
   --h3-size: var(--6);
+
+  --border-radius: var(--1);
+  --border-color: var(--gray-400);
+
+  --body-line-height: 1.5;
+  --text-small: 0.875rem;
+
 }
 
 .h1,h1,.h2,h2,.h3,h3,.h4,h4,.h5,h5 {
@@ -112,6 +119,7 @@
 
 /* Treehouse Utilities */
 
+/*TO DO: replace this with a variable*/
 .text-small {
   font-size: 0.875rem;
 }