Danger button background, spacing and more! (#681)

* Use snackskal as danger button background * Decrease spacing for button * Standardize clear filters button * Adjust RouteLeg for new design * Replace negative margin with border-radius
StenaIT · Nov 27, 2023 · bed2f85 · bed2f85
1 parent b1da391
commit bed2f85
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 55 deletions.
diff --git a/packages/elements/src/components/ui/buttons/FlatButton.module.css b/packages/elements/src/components/ui/buttons/FlatButton.module.css
@@ -29,7 +29,7 @@
     color: var(--lhds-color-red-500);
 
     &:hover {
-      background: var(--lhds-color-red-50);
+      background: var(--snackskal-light);
     }
 
     &:focus-visible {

diff --git a/packages/elements/src/components/ui/buttons/SecondaryButton.module.css b/packages/elements/src/components/ui/buttons/SecondaryButton.module.css
@@ -32,7 +32,7 @@
     color: var(--lhds-color-red-600);
 
     &:hover {
-      background-color: var(--lhds-color-red-50);
+      background-color: var(--snackskal-light);
       border: 1px solid var(--lhds-color-red-400);
     }
 

diff --git a/packages/elements/src/components/ui/buttons/common/ButtonContent.tsx b/packages/elements/src/components/ui/buttons/common/ButtonContent.tsx
@@ -108,7 +108,7 @@ export const ButtonContent: React.FC<ButtonContentProps> = ({
           {label}
         </span>
       )}
-      {label ? <Space /> : null}
+      {label ? <Space half /> : null}
       {rightContent}
     </div>
   );

diff --git a/packages/elements/src/components/ui/route-leg/RouteLeg.stories.tsx b/packages/elements/src/components/ui/route-leg/RouteLeg.stories.tsx
@@ -22,9 +22,9 @@ export const Demo = () => (
 
 export const Overview = () => {
   return (
-    <Box gap={5}>
+    <Box gap={5} alignItems={"flex-start"}>
       {routeLegSizes.map((size) => (
-        <Box width={220} gap={2} key={size}>
+        <Box gap={2} key={size}>
           <Heading as={"h4"}>{size}</Heading>
           <RouteLeg
             variant={"ship"}
@@ -68,7 +68,7 @@ export const WithChildren = () => (
 );
 
 export const Compact = () => (
-  <Box width={220}>
+  <Box alignItems={"flex-start"}>
     <RouteLeg
       variant={"ship"}
       departure={{ location: "Göteborg", dateTime: "23 Aug 09:10" }}
@@ -79,7 +79,7 @@ export const Compact = () => (
 );
 
 export const CompactWithChildren = () => (
-  <Box width={220}>
+  <Box alignItems={"flex-start"}>
     <RouteLeg
       variant={"ship"}
       departure={{ location: "Göteborg", dateTime: "23 Aug 09:10" }}
@@ -91,46 +91,42 @@ export const CompactWithChildren = () => (
   </Box>
 );
 export const StandardWithStrikethrough = () => (
-  <Box width={220}>
-    <RouteLeg
-      variant={"ship"}
-      departure={{
-        location: "Göteborg",
-        dateTime: "23 Aug 09:15",
-        originalDateTime: "23 Aug 09:10",
-      }}
-      arrival={{
-        location: "Frederikshavn",
-        dateTime: "23 Aug 12:50",
-        originalDateTime: "23 Aug 12:40",
-      }}
-      label={"1st route"}
-    />
-  </Box>
+  <RouteLeg
+    variant={"ship"}
+    departure={{
+      location: "Göteborg",
+      dateTime: "23 Aug 09:15",
+      originalDateTime: "23 Aug 09:10",
+    }}
+    arrival={{
+      location: "Frederikshavn",
+      dateTime: "23 Aug 12:50",
+      originalDateTime: "23 Aug 12:40",
+    }}
+    label={"1st route"}
+  />
 );
 
 export const RelaxedWithStrikethrough = () => (
-  <Box width={220}>
-    <RouteLeg
-      variant={"ship"}
-      departure={{
-        location: "Göteborg",
-        dateTime: "23 Aug 09:15",
-        originalDateTime: "23 Aug 09:10",
-      }}
-      arrival={{
-        location: "Frederikshavn",
-        dateTime: "23 Aug 12:50",
-        originalDateTime: "23 Aug 12:40",
-      }}
-      size={"relaxed"}
-      label={"1st route"}
-    />
-  </Box>
+  <RouteLeg
+    variant={"ship"}
+    departure={{
+      location: "Göteborg",
+      dateTime: "23 Aug 09:15",
+      originalDateTime: "23 Aug 09:10",
+    }}
+    arrival={{
+      location: "Frederikshavn",
+      dateTime: "23 Aug 12:50",
+      originalDateTime: "23 Aug 12:40",
+    }}
+    size={"relaxed"}
+    label={"1st route"}
+  />
 );
 
 export const CompactWithStrikethrough = () => (
-  <Box width={220}>
+  <Box alignItems={"flex-start"}>
     <RouteLeg
       variant={"ship"}
       departure={{
@@ -150,7 +146,7 @@ export const CompactWithStrikethrough = () => (
 );
 
 export const CompactWithLabel = () => (
-  <Box width={220}>
+  <Box alignItems={"flex-start"}>
     <RouteLeg
       variant={"ship"}
       departure={{ location: "Göteborg", dateTime: "23 Aug 09:10" }}
@@ -162,7 +158,7 @@ export const CompactWithLabel = () => (
 );
 
 export const CompactWithLabelSelected = () => (
-  <Box width={220}>
+  <Box width={250}>
     <RouteLeg
       variant={"ship"}
       departure={{ location: "Göteborg", dateTime: "23 Aug 09:10" }}
@@ -184,7 +180,7 @@ export const Relaxed = () => (
 );
 
 export const RelaxedSelected = () => (
-  <Box width={220}>
+  <Box width={250}>
     <RouteLeg
       variant={"rail"}
       departure={{ location: "Göteborg", dateTime: "23 Aug 09:10" }}
@@ -232,7 +228,7 @@ export const Multileg = () => (
 );
 
 export const MultilegCompact = () => (
-  <Box width={264} border={`1px solid ${cssColor("--lhds-color-ui-300")}`}>
+  <Box width={270} border={`1px solid ${cssColor("--lhds-color-ui-300")}`}>
     <Box indent={3} spacing={3}>
       <RouteLeg
         variant={"rail"}

diff --git a/packages/elements/src/components/ui/route-leg/RouteLeg.tsx b/packages/elements/src/components/ui/route-leg/RouteLeg.tsx
@@ -126,20 +126,19 @@ export const RouteLeg: React.FC<RouteLegProps> = ({
         />
       )}
       <div className={styles.grid}>
-        <Column alignItems={"center"} gap={0.5}>
-          <Icon icon={icon} fixedWidth size={24} />
+        <Column alignItems={"center"}>
+          <Icon icon={icon} fixedWidth size={20} />
+          <Space half />
           <Box
             flex={1}
-            border={`1px solid ${cssColor("--lhds-color-ui-300")}`}
-            borderRadius={2}
+            border={`1px solid ${cssColor("--lhds-color-ui-900")}`}
+            borderRadius={"2px 2px 0 0"}
           />
           <Box
-            flex={"none"}
-            border={`4px solid ${cssColor("--lhds-color-blue-100")}`}
-            background={cssColor("--lhds-color-blue-500")}
+            borderRadius={"50%"}
+            border={`2px solid ${cssColor("--lhds-color-ui-900")}`}
             width={16}
             height={16}
-            borderRadius={8}
           />
         </Column>
         <Column gap={size === "standard" ? 3 : 2}>

diff --git a/packages/filter/src/features/search-filter/features/chips/SearchFilterChips.tsx b/packages/filter/src/features/search-filter/features/chips/SearchFilterChips.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ReactNode, useCallback } from "react";
 import { Row } from "@stenajs-webui/core";
-import { FlatButton } from "@stenajs-webui/elements";
+import { FlatButton, stenaClean } from "@stenajs-webui/elements";
 import { useSearchFilterDispatch } from "../../context/SearchFilterDispatchContext";
 import { useSearchFilterActions } from "../../context/SearchFilterActionsContext";
 
@@ -28,7 +28,8 @@ export const SearchFilterChips: React.FC<SearchFilterChipsProps> = ({
       {!disableClearAllButton && (
         <FlatButton
           size={"small"}
-          label={"Clear all"}
+          leftIcon={stenaClean}
+          label={"Clear"}
           onClick={onClickClearAll}
         />
       )}
-Original file line number
+Diff line change
@@ Expand Up @@
               {label}
             </span>
           )}
-          {label ? <Space /> : null}
+          {label ? <Space half /> : null}
           {rightContent}
         </div>
       );
@@ Expand Down @@