fix: styling

ricardocasares · Mar 21, 2021 · 942f385 · 942f385
1 parent edbb8a1
commit 942f385
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 28 deletions.
diff --git a/src/components/AutoGrid/index.ts b/src/components/AutoGrid/index.ts
@@ -3,6 +3,6 @@ import { Box } from "@/components/Box";
 
 export const AutoGrid = styled(Box, {
   display: "grid",
-  gap: "10px",
+  gap: "$3",
   gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
 });
diff --git a/src/components/Card/style.ts b/src/components/Card/style.ts
@@ -1,5 +1,4 @@
 import { styled } from "@/css";
-import { truncate } from "@/css/utils";
 import { Gradient } from "@/components/Gradient";
 
 export const Cover = styled(Gradient, {
@@ -11,18 +10,14 @@ export const Cover = styled(Gradient, {
 export const Title = styled.h2({
   fontSize: "$2",
   fontWeight: 500,
-  margin: "0",
-  marginBottom: "$1",
   color: "fg",
-  ...truncate,
 });
 
 export const Subtitle = styled.h3({
   fontSize: "$1",
   fontWeight: 400,
   textTransform: "uppercase",
   color: "$accents-4",
-  margin: "0",
 });
 
 export const Body = styled.div({

diff --git a/src/components/SearchInput/index.ts b/src/components/SearchInput/index.ts
@@ -7,8 +7,9 @@ export const SearchInput = styled.input({
   borderRadius: "$1",
   color: "$foreground",
   background: "$background",
-  border: "1px solid $accents-3",
+  border: "1px solid $accents-2",
   outline: "none",
   transition: "border-color 0.2s",
-  "&:hover, &:focus": { borderColor: "$active" },
+  "&::placeholder": { color: "$accents-3" },
+  "&:hover, &:focus": { borderColor: "$accents-4" },
 });
diff --git a/src/components/Stack/index.ts b/src/components/Stack/index.ts
@@ -3,16 +3,10 @@ import { Box } from "@/components/Box";
 
 export const Stack = styled(Box, {
   variants: {
-    debug: {
-      true: {
-        border: "1px solid red",
-      },
-    },
-
     separated: {
       true: {
         "> * + *": {
-          borderTop: "1px solid $accents-1",
+          borderTop: "1px solid $accents-2",
         },
       },
     },
@@ -21,24 +15,30 @@ export const Stack = styled(Box, {
       sm: {
         padding: "$3",
 
-        "> * ": {
-          padding: "$2 0",
+        "> * + *": {
+          marginTop: "$2",
+          padding: 0,
+          paddingTop: "$2",
         },
       },
 
       md: {
         padding: "$4",
 
-        "> * ": {
-          padding: "$3 0",
+        "> * + *": {
+          marginTop: "$3",
+          padding: 0,
+          paddingTop: "$3",
         },
       },
 
       xl: {
         padding: "$5",
 
-        "> * ": {
-          padding: "$4 0",
+        "> * + *": {
+          marginTop: "$4",
+          padding: 0,
+          paddingTop: "$4",
         },
       },
     },

diff --git a/src/components/Typography/index.tsx b/src/components/Typography/index.tsx
@@ -28,5 +28,13 @@ export const Heading = styled.h1({
 
 export const Text = styled.p({
   marginTop: "0",
-  lineHeight: "1.5em"
+  lineHeight: "1.5em",
+
+  variants: {
+    muted: {
+      true: {
+        color: "$accents-4"
+      }
+    }
+  }
 });
diff --git a/src/pages/favorites.tsx b/src/pages/favorites.tsx
@@ -11,7 +11,7 @@ export const Search = () => {
   const { favs } = useFavorites();
 
   return (
-    <Stack spacing="sm">
+    <Stack>
       <NextSeo description="Your favorite radios around the world" />
       <Heading as="h1" size="1">{t.favorites.title}</Heading>
       <StationCardFavs uuids={favs} />

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -9,7 +9,7 @@ export const Index = () => {
   const language = localesMap[locale];
 
   return (
-    <Stack spacing="sm">
+    <Stack>
       <Heading as="h1" size="1">{t.index.title}</Heading>
       <StationCardList language={language} limit={20} />
     </Stack>

diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
@@ -18,14 +18,14 @@ export const Settings = () => {
   return (
     <Box>
       <NextSeo description="Customize your experience" />
-      <Stack as="ul" spacing="sm">
+      <Stack>
         <Heading as="h1" size="1">{t.settings.title}</Heading>
 
         <Heading as="h2" size="2" muted>
           {t.settings.color}
         </Heading>
 
-        <Stack as="ul" spacing="sm" separated>
+        <Stack as="ul" separated css={{ marginBottom: "$4" }}>
           {["dark", "light", "system"].map((mode) => (
             <li key={mode}>
               <GhostButton onClick={() => setTheme(mode)}>
@@ -41,7 +41,7 @@ export const Settings = () => {
           {t.settings.language}
         </Heading>
 
-        <Stack as="ul" spacing="sm" separated>
+        <Stack as="ul" separated css={{ marginBottom: "$4" }}>
           {locales.map((lang) => (
             <li key={lang}>
               <Link href="/settings" locale={lang}>
@@ -56,7 +56,7 @@ export const Settings = () => {
         </Stack>
 
         <Box css={{ textAlign: 'center' }}>
-          <Text as="small">
+          <Text as="small" muted>
             bemba v
           <a href={`https://github.com/ricardocasares/bemba/commit/${SHA}`}>
               {SHA.slice(0, 6)}