Moved styles into separate file

orchestrated-io · Jan 22, 2025 · 3a15721 · 3a15721
1 parent 6d4077c
commit 3a15721
Show file tree

Hide file tree

Showing 2 changed files with 131 additions and 122 deletions.
diff --git a/lib/components/Header/Header.styles.js b/lib/components/Header/Header.styles.js
@@ -0,0 +1,122 @@
+import styled from "styled-components";
+import { space, layout } from "styled-system";
+import css from "@styled-system/css";
+import { themeGet } from "@styled-system/theme-get";
+import Box from "../Box";
+
+export const Bar = styled("header").attrs((props) => ({
+  "data-testid": props.dataTestId
+}))(
+  (props) => ({ height: themeGet("appScale.navBarSize")(props) }),
+  css({
+    width: "100%",
+    zIndex: 12,
+    position: "sticky",
+    top: "0",
+    display: "flex",
+    alignItems: "center",
+    bg: "transparent",
+    gap: "r",
+    p: "r"
+  }),
+  space
+);
+
+export const AppName = styled("div")(
+  (props) =>
+    css({
+      background: themeGet("colors.white")(props),
+      width: "fit-content",
+      display: "flex",
+      alignItems: "center",
+      gap: "s",
+      px: "s",
+      height: "38px",
+      borderRadius: themeGet("radii.2")(props),
+      border: `1px solid ${themeGet("colors.greyLight")(props)}`,
+      boxShadow: themeGet("shadows.boxDefault")(props),
+      fontSize: themeGet("fontSizes.1")(props),
+      fontWeight: themeGet("fontWeights.2")(props),
+      color: themeGet("colors.greyDarkest")(props),
+      img: {
+        height: "22px",
+        width: "auto"
+      },
+      svg: {
+        height: "22px",
+        width: "auto"
+      },
+      a: {
+        fontSize: themeGet("fontSizes.1")(props),
+        fontWeight: themeGet("fontWeights.2")(props),
+        color: themeGet("colors.greyDarkest")(props)
+      }
+    }),
+  space
+);
+
+export const SearchContainer = styled("div")(
+  (props) =>
+    css({
+      maxWidth: "600px",
+      flex: "1 1 auto",
+      borderRadius: themeGet("radii.2")(props),
+      boxShadow: themeGet("shadows.boxDefault")(props)
+    }),
+  space,
+  layout
+);
+
+export const UserMenuToggle = styled("button")((props) =>
+  css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "xs",
+    padding: "0",
+    cursor: "pointer",
+    border: "none",
+    appearance: "none",
+    bg: "transparent",
+    color: themeGet("colors.greyDark")(props),
+    fontSize: themeGet("fontSizes.1")(props),
+    fontWeight: themeGet("fontWeights.2")(props),
+    "&:focus, &:hover": {
+      outline: "none",
+      "svg path": {
+        transition: "fill 300ms ease",
+        fill: themeGet("colors.primary")(props)
+      }
+    }
+  })
+);
+
+export const AvatarBorder = styled(Box)(
+  css({
+    background:
+      "linear-gradient(0deg, rgba(155,81,224,1) 0%, rgba(0,145,234,1) 100%)"
+  })
+);
+
+export const UserMenuContainer = styled(Box)((props) =>
+  css({
+    borderRadius: `19px ${themeGet("radii.2")(props)} ${themeGet("radii.2")(
+      props
+    )} 19px`,
+    position: "relative"
+  })
+);
+
+export const UserMenu = styled(Box)((props) =>
+  css({
+    position: "absolute",
+    gap: "s",
+    top: "calc(100% + 8px)",
+    right: "0",
+    zIndex: themeGet("zIndices.2")(props),
+    opacity: props.isOpen ? 1 : 0,
+    transform: props.isOpen ? "translateY(0)" : "translateY(-10px)",
+    pointerEvents: props.isOpen ? "all" : "none",
+    transition: "opacity 0.3s ease, transform 0.3s ease"
+  })
+);
diff --git a/lib/components/Header/index.js b/lib/components/Header/index.js
@@ -1,132 +1,19 @@
 import React, { useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
-import { space, layout } from "styled-system";
 import Avatar from "../Avatar";
-import Box from "../Box";
 import Icon from "../Icon";
 import Divider from "../Divider";
 import Flex, { FlexItem } from "../Flex";
 import { Small } from "../Typography";
-import { css } from "@styled-system/css";
-import { themeGet } from "@styled-system/theme-get";
-
-const Bar = styled("header").attrs((props) => ({
-  "data-testid": props.dataTestId
-}))(
-  (props) => ({ height: themeGet("appScale.navBarSize")(props) }),
-  css({
-    width: "100%",
-    zIndex: 12,
-    position: "sticky",
-    top: "0",
-    display: "flex",
-    alignItems: "center",
-    bg: "transparent",
-    gap: "r",
-    p: "r"
-  }),
-  space
-);
-
-const AppName = styled("div")(
-  (props) =>
-    css({
-      background: themeGet("colors.white")(props),
-      width: "fit-content",
-      display: "flex",
-      alignItems: "center",
-      gap: "s",
-      px: "s",
-      height: "38px",
-      borderRadius: themeGet("radii.2")(props),
-      border: `1px solid ${themeGet("colors.greyLight")(props)}`,
-      boxShadow: themeGet("shadows.boxDefault")(props),
-      fontSize: themeGet("fontSizes.1")(props),
-      fontWeight: themeGet("fontWeights.2")(props),
-      color: themeGet("colors.greyDarkest")(props),
-      img: {
-        height: "22px",
-        width: "auto"
-      },
-      svg: {
-        height: "22px",
-        width: "auto"
-      },
-      a: {
-        fontSize: themeGet("fontSizes.1")(props),
-        fontWeight: themeGet("fontWeights.2")(props),
-        color: themeGet("colors.greyDarkest")(props)
-      }
-    }),
-  space
-);
-
-const SearchContainer = styled("div")(
-  (props) =>
-    css({
-      maxWidth: "600px",
-      flex: "1 1 auto",
-      borderRadius: themeGet("radii.2")(props),
-      boxShadow: themeGet("shadows.boxDefault")(props)
-    }),
-  space,
-  layout
-);
-
-const UserMenuToggle = styled("button")((props) =>
-  css({
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "xs",
-    padding: "0",
-    cursor: "pointer",
-    border: "none",
-    appearance: "none",
-    bg: "transparent",
-    color: themeGet("colors.greyDark")(props),
-    fontSize: themeGet("fontSizes.1")(props),
-    fontWeight: themeGet("fontWeights.2")(props),
-    "&:focus, &:hover": {
-      outline: "none",
-      "svg path": {
-        transition: "fill 300ms ease",
-        fill: themeGet("colors.primary")(props)
-      }
-    }
-  })
-);
-
-const AvatarBorder = styled(Box)(
-  css({
-    background:
-      "linear-gradient(0deg, rgba(155,81,224,1) 0%, rgba(0,145,234,1) 100%)"
-  })
-);
-
-const UserMenuContainer = styled(Box)((props) =>
-  css({
-    borderRadius: `19px ${themeGet("radii.2")(props)} ${themeGet("radii.2")(
-      props
-    )} 19px`,
-    position: "relative"
-  })
-);
-
-const UserMenu = styled(Box)((props) =>
-  css({
-    position: "absolute",
-    gap: "s",
-    top: "calc(100% + 8px)",
-    right: "0",
-    zIndex: themeGet("zIndices.2")(props),
-    opacity: props.isOpen ? 1 : 0,
-    transform: props.isOpen ? "translateY(0)" : "translateY(-10px)",
-    pointerEvents: props.isOpen ? "all" : "none",
-    transition: "opacity 0.3s ease, transform 0.3s ease"
-  })
-);
+import {
+  Bar,
+  AppName,
+  SearchContainer,
+  UserMenuToggle,
+  AvatarBorder,
+  UserMenuContainer,
+  UserMenu
+} from "./Header.styles";
 
 /**
  * Header component for top of app.