Harmonize design

Author: darekkay

.idea/inspectionProfiles/Project_Default.xml

@@ -1,3 +1,7 @@
+/* Default config: https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js */
+
+// TODO: move into @darekkay/styles and inherit
+
 module.exports = {
   prefix: "",
   important: false,
@@ -39,16 +43,16 @@ module.exports = {
 
     // Typography
 
-    // Update styles/typography.scss as well
+    // Update styles/_variables.scss as well
     fontSize: {
       0: "1rem",
       1: "1.2rem",
       2: "1.4rem",
-      3: "1.8rem",
-      4: "2rem",
-      5: "2.5rem",
-      6: "3rem",
-      7: "4rem",
+      3: "1.6rem",
+      4: "1.8rem",
+      5: "2rem",
+      6: "2.4rem",
+      7: "3rem",
     },
 
     fontWeight: {
@@ -68,6 +72,13 @@ module.exports = {
       loose: "2",
     },
 
+    letterSpacing: {
+      tighter: "-0.05em",
+      tight: "-0.025em",
+      normal: "0em",
+      wide: "0.025em",
+    },
+
     // Spacing
 
     spacing: {
@@ -98,6 +109,12 @@ module.exports = {
 
     // Misc
 
+    boxShadow: {
+      sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+      lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+      xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+    },
     cursor: {
       auto: "auto",
       default: "default",
@@ -150,12 +167,14 @@ module.exports = {
     lineHeight: [],
     textColor: [],
     backgroundColor: [],
+    letterSpacing: [],
     textAlign: ["responsive"],
     textDecoration: ["hover", "focus"],
     textTransform: [],
 
     // Misc
 
+    boxShadow: [],
     cursor: [],
     wordBreak: [],
     zIndex: [],
@@ -201,6 +220,7 @@ module.exports = {
 
     // Misc
 
+    boxShadow: true,
     cursor: true,
     wordBreak: true,
     zIndex: true,
@@ -226,7 +246,6 @@ module.exports = {
     borderRadius: false,
     borderStyle: false,
     borderWidth: false,
-    boxShadow: false,
     boxSizing: false,
     clear: false,
     divideColor: false,

app/internals/tailwind/config.js

@@ -9,7 +9,7 @@
     "loading": "Lade...",
     "settings": "Einstellungen",
     "help": "Hilfe",
-    "error": "Fehler",
+    "error": "Unerwarteter Fehler",
     "documentation": "Dokumentation",
     "poweredBy": "Powered by <0>{{name}}</0>",
     "headline": "Überschrift",

app/src/common/translations/de.json

@@ -11,7 +11,7 @@
     "loading": "Loading...",
     "settings": "Settings",
     "help": "Help",
-    "error": "Error",
+    "error": "Unexpected error",
     "documentation": "Documentation",
     "poweredBy": "Powered by <0>{{name}}</0>",
     "headline": "Headline",

app/src/common/translations/en.json

@@ -32,7 +32,7 @@ const Button: React.FC<Props> = React.forwardRef<HTMLButtonElement, Props>(
         "justify-center",
         "rounded",
         "cursor-pointer",
-        "text-3",
+        "text-4",
         "no-underline",
         className
       )}

app/src/components/button/index.tsx

@@ -13,8 +13,9 @@ const TextArea: React.FC<Props> = ({
     <Label text={label}>
       <textarea
         className={cn(
-          "py-1 px-4 w-full h-full border rounded resize-none text-3",
+          "py-1 px-4 w-full h-full border rounded resize-none",
           { "bg-color-default": !className?.includes("bg-color-") },
+          { "text-4": !className?.includes("text-") },
           className
         )}
         onChange={(event) => {

app/src/components/forms/text-area/index.tsx

@@ -68,7 +68,6 @@ const Header: React.FC<Props> = memo(
             icon="question"
             href="https://dashboard.darekkay.com/docs"
           />
-          <MenuSeparator />
           <MenuAction
             text={t("common.settings")}
             icon="cog"

app/src/components/header/index.tsx

@@ -36,7 +36,7 @@ const Menu: React.FC<Props> = ({
       <ReakitMenu
         {...menu}
         aria-label={title}
-        className="z-20 min-w-250 bg-color-panel border outline-none no-focus"
+        className="z-20 min-w-250 mt-2 overflow-hidden bg-color-panel border rounded-lg shadow-xl outline-none no-focus"
       >
         <MenuContext.Provider value={menu}>{children}</MenuContext.Provider>
       </ReakitMenu>

app/src/components/menu/index.tsx

@@ -39,7 +39,7 @@ const Modal: React.FC<Props> = ({
       {...rest}
     >
       <div className="flex">
-        {headline && <h2 className="text-3 font-bold mb-6">{headline}</h2>}
+        {headline && <h2 className="text-4 font-bold mb-6">{headline}</h2>}
         <Button
           variant="unstyled"
           size="small"

app/src/components/modal/index.tsx

@@ -9,7 +9,7 @@ const Section: React.FC<Props> = ({ headline, children }) => {
   return (
     <div>
       {headline && (
-        <Headline level={3} className="mb-4 text-3 font-semibold">
+        <Headline level={3} className="mb-4 text-4 font-semibold">
           {headline}
         </Headline>
       )}