Merge pull request #510 from code0-tech/feat/styling

nicosammito · web-flow · commit e1545b425643 · 2025-11-19T14:59:10.000+01:00
Styling
diff --git a/src/components/badge/Badge.stories.tsx b/src/components/badge/Badge.stories.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import {Badge} from "./Badge";
 import {Button} from "../button/Button";
 import {IconGitBranch} from "@tabler/icons-react";
-import {Colors as BadgeVariants}  from "../../utils/types";
+import {Colors as BadgeVariants} from "../../utils/types";
 
 const meta: Meta = {
     title: "Badge",
@@ -26,7 +26,7 @@ export const Variants = () => {
 
 export const ButtonExample = () => {
     return <Button color={"primary"}>
-            <IconGitBranch/>
+        <IconGitBranch size={16}/>
         Merge Branch
         <Badge style={{marginLeft: ".5rem"}} color={"secondary"}>
             Badge
diff --git a/src/components/badge/Badge.style.scss b/src/components/badge/Badge.style.scss
@@ -3,16 +3,16 @@
 @use "../../styles/variables";
 
 .badge {
-  padding: variables.$xxs / 2 variables.$xs;
+  padding: variables.$xxs / 3 variables.$xxs;
   display: inline-flex;
   font-size: variables.$xs;
   width: fit-content;
   align-items: center;
   gap: variables.$xxs;
+  border-radius: variables.$xxs;
 
   & {
     @include helpers.fontStyle();
-    @include helpers.borderRadius();
   }
 }
 
diff --git a/src/components/breadcrumb/Breadcrumb.tsx b/src/components/breadcrumb/Breadcrumb.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import {mergeCode0Props} from "../../utils/utils";
 import {Code0Component} from "../../utils/types";
 import "./Breadcrumb.style.scss"
+import {IconChevronRight} from "@tabler/icons-react";
 
 export interface BreadcrumbProps extends Code0Component<HTMLDivElement> {
     splitter?: React.ReactNode //defaults to slash (/)
@@ -10,7 +11,7 @@ export interface BreadcrumbProps extends Code0Component<HTMLDivElement> {
 
 export const Breadcrumb: React.FC<BreadcrumbProps> = props => {
 
-    const {splitter = "/", children, ...rest} = props
+    const {splitter = <IconChevronRight size={16}/>, children, ...rest} = props
 
     return <div {...mergeCode0Props(`breadcrumb`, rest)}>
         {
diff --git a/src/components/button/Button.style.scss b/src/components/button/Button.style.scss
@@ -14,10 +14,6 @@
   font-size: variables.$sm;
 
   @include helpers.disabled;
-
-  & {
-    @include helpers.borderRadius()
-  }
 }
 
 
@@ -48,5 +44,6 @@
 
   .button--#{$name} {
     padding: $size $next-size;
+    border-radius: $next-size;
   }
 }
diff --git a/src/components/card/Card.style.scss b/src/components/card/Card.style.scss
@@ -7,6 +7,7 @@
   display: block;
   position: relative;
   font-size: variables.$sm;
+  overflow: hidden;
 
   & {
     @include helpers.fontStyle();
@@ -18,12 +19,12 @@
     }
 
     &--border:first-child {
-      padding-top: 0;
+      margin-top: calc(-1 * var(--padding));
       border-top: none;
     }
 
     &--border:not(:has(~ .card__section)) {
-      padding-bottom: 0;
+      margin-bottom: calc(-1 * var(--padding));
       border-bottom: none;
     }
   }
@@ -36,6 +37,7 @@
 
   &__section {
     position: relative;
+    box-sizing: border-box;
 
     &--border {
       margin-right: calc(-1 * var(--padding));
@@ -50,6 +52,13 @@
 
       }
     }
+
+    &--hover {
+      cursor: pointer;
+      &:hover {
+        background: helpers.backgroundColor(variables.$secondary);
+      }
+    }
   }
 
 }
@@ -94,7 +103,7 @@
   }
 
   .card--border-#{$name} {
-    box-shadow: inset 0 0 0 1px helpers.borderColor($color);
+    box-shadow: 1px solid helpers.borderColor($color);
   }
 
   .card--border--dashed {
diff --git a/src/components/card/CardSection.tsx b/src/components/card/CardSection.tsx
@@ -8,19 +8,26 @@ export interface SectionType extends Code0Component<HTMLDivElement> {
     image?: boolean,
     //defaults to false
     border?: boolean
+    hover?: boolean
 }
 
 const CardSection: React.FC<SectionType> = (props) => {
 
     const {
         image = false,
         border = false,
+        hover = false,
         children,
         ...args
     } = props;
 
     return <>
-        <div {...mergeCode0Props(`card__section ${border ? "card__section--border" : ""} ${image ? "card__section--image" : ""}`, args)}>
+        <div {...mergeCode0Props(`
+                                card__section 
+                                ${border ? "card__section--border" : ""} 
+                                ${image ? "card__section--image" : ""}
+                                ${hover ? "card__section--hover" : ""}
+        `, args)}>
             {children}
         </div>
     </>
diff --git a/src/components/d-organization/DOrganizationList.tsx b/src/components/d-organization/DOrganizationList.tsx
@@ -7,24 +7,27 @@ import {DOrganizationReactiveService} from "./DOrganization.service";
 import CardSection from "../card/CardSection";
 import {DOrganizationContent} from "./DOrganizatonContent";
 import {DOrganizationView} from "./DOrganization.view";
-import {Scalars} from "@code0-tech/sagittarius-graphql-types";
+import {Organization, Scalars} from "@code0-tech/sagittarius-graphql-types";
 
-export interface DOrganizationListProps extends Omit<Card, "children"> {
+export interface DOrganizationListProps extends Omit<Card, "children" | "onSelect"> {
     filter?: (organizations: DOrganizationView, index: number) => boolean
-    onSetting?: (organizationId: Scalars['OrganizationID']['output']) => void
-    onLeave?: (organizationId: Scalars['OrganizationID']['output']) => void
+    onSetting?: (organizationId: Organization['id']) => void
+    onLeave?: (organizationId: Organization['id']) => void
+    onSelect?: (organizationId: Organization['id']) => void
 }
 
 export const DOrganizationList: React.FC<DOrganizationListProps> = (props) => {
 
     const organizationService = useService(DOrganizationReactiveService)
     const organizationStore = useStore(DOrganizationReactiveService)
     const organizations = React.useMemo(() => organizationService.values(), [organizationStore])
-    const {filter = () => true, onLeave, onSetting, ...rest} = props
+    const {filter = () => true, onLeave, onSetting, onSelect, ...rest} = props
 
     return <Card {...rest}>
         {organizations.filter(filter).map((organization) => organization.id && (
-            <CardSection border key={organization.id}>
+            <CardSection border hover onClick={() => {
+                if (onSelect) onSelect(organization.id)
+            }} key={organization.id}>
                 <DOrganizationContent onLeave={onLeave} onSetting={onSetting} organizationId={organization?.id}/>
             </CardSection>
         ))}
diff --git a/src/components/d-organization/DOrganizatonContent.tsx b/src/components/d-organization/DOrganizatonContent.tsx
@@ -21,7 +21,6 @@ export interface DOrganizationCardProps extends Code0Component<HTMLDivElement> {
     onLeave?: (organizationId: Scalars['OrganizationID']['output']) => void
 }
 
-//TODO: handle skeleton
 export const DOrganizationContent: React.FC<DOrganizationCardProps> = props => {
 
     const {
@@ -86,12 +85,18 @@ export const DOrganizationContent: React.FC<DOrganizationCardProps> = props => {
             </Flex>
             <Flex align={"center"} style={{gap: "0.35rem"}}>
                 {(organization?.userAbilities?.deleteOrganization || organization?.userAbilities?.updateOrganization) ? (
-                    <Button color={"secondary"} onClick={() => onSetting(organizationId)}>
+                    <Button color={"secondary"} onClick={(event) => {
+                        event.stopPropagation()
+                        onSetting(organizationId)
+                    }}>
                         <IconSettings size={16}/>
                     </Button>
                 ) : null}
                 {namespaceMember && namespaceMember.userAbilities?.deleteMember ? (
-                    <Button color={"error"} onClick={() => onLeave(organizationId)}>
+                    <Button color={"error"} onClick={(event) => {
+                        event.stopPropagation()
+                        onLeave(organizationId)
+                    }}>
                         <IconLogout size={16}/> Leave
                     </Button>
                 ) : null}
diff --git a/src/components/d-project/DNamespaceProjectContent.tsx b/src/components/d-project/DNamespaceProjectContent.tsx
@@ -88,7 +88,10 @@ export const DNamespaceProjectContent: React.FC<DNamespaceProjectContentProps> =
                     )}
                 </Flex>
                 {project?.userAbilities?.deleteNamespaceProject || project?.userAbilities?.updateNamespaceProject ? (
-                    <Button color={"secondary"} onClick={() => onSetting(projectId)}>
+                    <Button color={"secondary"} onClick={(event) => {
+                        event.stopPropagation()
+                        onSetting(projectId)
+                    }}>
                         <IconSettings size={16}/>
                     </Button>
                 ) : null}
diff --git a/src/components/d-project/DNamespaceProjectList.tsx b/src/components/d-project/DNamespaceProjectList.tsx
@@ -7,21 +7,24 @@ import {DNamespaceProjectReactiveService} from "./DNamespaceProject.service";
 import CardSection from "../card/CardSection";
 import {DNamespaceProjectContent} from "./DNamespaceProjectContent";
 
-export interface DNamespaceProjectListProps extends Omit<Card, "children"> {
+export interface DNamespaceProjectListProps extends Omit<Card, "children" | "onSelect"> {
     filter?: (project: DNamespaceProjectView, index: number) => boolean
     onSetting?: (projectId: NamespaceProject["id"]) => void
+    onSelect?: (projectId: NamespaceProject["id"]) => void
 }
 
 export const DNamespaceProjectList: React.FC<DNamespaceProjectListProps> = (props) => {
-    const {filter = () => true, onSetting, ...rest} = props
+    const {filter = () => true, onSetting, onSelect, ...rest} = props
 
     const projectService = useService(DNamespaceProjectReactiveService)
     const projectStore = useStore(DNamespaceProjectReactiveService)
     const projects = React.useMemo(() => projectService.values(), [projectStore])
 
     return <Card {...rest}>
         {projects.filter(filter).map((project) => project.id && (
-            <CardSection border key={project.id}>
+            <CardSection border hover onClick={() => {
+                if (onSelect) onSelect(project.id)
+            }} key={project.id}>
                 <DNamespaceProjectContent onSetting={onSetting} projectId={project?.id}/>
             </CardSection>
         ))}
diff --git a/src/components/d-runtime/DRuntimeContent.tsx b/src/components/d-runtime/DRuntimeContent.tsx
@@ -43,7 +43,10 @@ export const DRuntimeContent: React.FC<DRuntimeContentProps> = (props) => {
                 )}
             </Flex>
             {runtime?.userAbilities?.deleteRuntime || runtime?.userAbilities?.updateRuntime || runtime?.userAbilities?.rotateRuntimeToken ? (
-                <Button color={"secondary"} onClick={() => onSetting(runtimeId)}>
+                <Button color={"secondary"} onClick={(event) => {
+                    event.stopPropagation()
+                    onSetting(runtimeId)
+                }}>
                     <IconSettings size={16}/>
                 </Button>
             ) : null}
diff --git a/src/components/d-runtime/DRuntimeList.tsx b/src/components/d-runtime/DRuntimeList.tsx
@@ -7,22 +7,25 @@ import {DRuntimeReactiveService} from "./DRuntime.service";
 import CardSection from "../card/CardSection";
 import {DRuntimeContent} from "./DRuntimeContent";
 
-export interface DRuntimeListProps extends Omit<Card, "children"> {
+export interface DRuntimeListProps extends Omit<Card, "children" | "onSelect"> {
     filter?: (runtime: DRuntimeView, index: number) => boolean
+    onSelect?: (userId: Runtime['id']) => void
     onSetting?: (runtimeId: Runtime['id']) => void
 }
 
 export const DRuntimeList: React.FC<DRuntimeListProps> = (props) => {
 
-    const {filter = () => true, onSetting, ...rest} = props
+    const {filter = () => true, onSetting, onSelect, ...rest} = props
 
     const runtimeService = useService(DRuntimeReactiveService)
     const runtimeStore = useStore(DRuntimeReactiveService)
     const runtimes = React.useMemo(() => runtimeService.values(), [runtimeStore])
 
     return <Card {...rest}>
         {runtimes.filter(filter).map((runtime) => runtime.id && (
-            <CardSection border key={runtime.id}>
+            <CardSection border hover onClick={() => {
+                if (onSelect) onSelect(runtime.id)
+            }} key={runtime.id}>
                 <DRuntimeContent onSetting={onSetting} runtimeId={runtime?.id}/>
             </CardSection>
         ))}
diff --git a/src/components/d-user/DUserContent.tsx b/src/components/d-user/DUserContent.tsx
@@ -53,10 +53,16 @@ export const DUserContent: React.FC<DUserContentProps> = (props) => {
                     {
                         remove ? (
                             <Flex align={"center"} style={{gap: "0.35rem"}}>
-                                <Button color={"error"} onClick={() => onRemove(userId)}>
+                                <Button color={"error"} onClick={(event) => {
+                                    event.stopPropagation()
+                                    onRemove(userId)
+                                }}>
                                     Confirm remove
                                 </Button>
-                                <Button onClick={() => setRemove(false)} color={"success"}>
+                                <Button onClick={(event) => {
+                                    event.stopPropagation()
+                                    setRemove(false)
+                                }} color={"success"}>
                                     Cancel
                                 </Button>
                             </Flex>
diff --git a/src/components/d-user/DUserList.tsx b/src/components/d-user/DUserList.tsx
@@ -7,22 +7,24 @@ import {Card} from "../card/Card";
 import CardSection from "../card/CardSection";
 import {DUserContent} from "./DUserContent";
 
-export interface DUserListProps extends Omit<Card, "children"> {
+export interface DUserListProps extends Omit<Card, "children" | "onSelect"> {
     filter?: (user: DUserView, index: number) => boolean
+    onSelect?: (userId: User['id']) => void
     onRemove?: (userId: User['id']) => void
 }
 
 export const DUserList: React.FC<DUserListProps> = (props) => {
 
-    const {filter = () => true, onRemove, ...rest} = props
+    const {filter = () => true, onRemove, onSelect, ...rest} = props
     const userService = useService(DUserReactiveService)
     const userStore = useStore(DUserReactiveService)
     const users = React.useMemo(() => userService.values(), [userStore])
 
-
     return <Card {...rest}>
-        {users.filter(filter).map((user) => user.id && (
-            <CardSection border key={user.id}>
+        {users.filter(filter).map((user) => user && user.id && (
+            <CardSection border hover onClick={() => {
+                if (onSelect) onSelect(user.id)
+            }} key={user.id}>
                 <DUserContent onRemove={onRemove} userId={user?.id}/>
             </CardSection>
         ))}
diff --git a/src/components/menu/Menu.style.scss b/src/components/menu/Menu.style.scss
@@ -11,7 +11,7 @@
     box-sizing: border-box;
 
     & {
-      @include box.box(variables.$primary, variables.$primary, variables.$primary);
+      @include box.box(variables.$primary);
       @include helpers.borderRadius();
     }
   }
@@ -45,12 +45,12 @@
       @include helpers.noFocusStyle();
       @include helpers.fontStyle();
       @include helpers.disabled();
-      box-shadow: none;
+      border: none;
     }
 
     &:focus {
       @include box.box(variables.$white, variables.$white, variables.$white);
-      box-shadow: none;
+      border: none;
       width: 100%;
     }
   }
diff --git a/src/components/quote/Quote.tsx b/src/components/quote/Quote.tsx
diff --git a/src/styles/_box.scss b/src/styles/_box.scss
diff --git a/src/styles/_helpers.scss b/src/styles/_helpers.scss

Original file line number	Diff line number	Diff line change
`@@ -14,10 +14,6 @@`
`14`	`14`	`font-size: variables.$sm;`
`15`	`15`
`16`	`16`	`@include helpers.disabled;`
`17`		`-`
`18`		`- & {`
`19`		`- @include helpers.borderRadius()`
`20`		`- }`
`21`	`17`	`}`
`22`	`18`
`23`	`19`
`@@ -48,5 +44,6 @@`
`48`	`44`
`49`	`45`	`.button--#{$name} {`
`50`	`46`	`padding: $size $next-size;`
	`47`	`+ border-radius: $next-size;`
`51`	`48`	`}`
`52`	`49`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`display: block;`
`8`	`8`	`position: relative;`
`9`	`9`	`font-size: variables.$sm;`
	`10`	`+ overflow: hidden;`
`10`	`11`
`11`	`12`	`& {`
`12`	`13`	`@include helpers.fontStyle();`
`@@ -18,12 +19,12 @@`
`18`	`19`	`}`
`19`	`20`
`20`	`21`	`&--border:first-child {`
`21`		`- padding-top: 0;`
	`22`	`+ margin-top: calc(-1 * var(--padding));`
`22`	`23`	`border-top: none;`
`23`	`24`	`}`
`24`	`25`
`25`	`26`	`&--border:not(:has(~ .card__section)) {`
`26`		`- padding-bottom: 0;`
	`27`	`+ margin-bottom: calc(-1 * var(--padding));`
`27`	`28`	`border-bottom: none;`
`28`	`29`	`}`
`29`	`30`	`}`
`@@ -36,6 +37,7 @@`
`36`	`37`
`37`	`38`	`&__section {`
`38`	`39`	`position: relative;`
	`40`	`+ box-sizing: border-box;`
`39`	`41`
`40`	`42`	`&--border {`
`41`	`43`	`margin-right: calc(-1 * var(--padding));`
`@@ -50,6 +52,13 @@`
`50`	`52`
`51`	`53`	`}`
`52`	`54`	`}`
	`55`	`+`
	`56`	`+ &--hover {`
	`57`	`+ cursor: pointer;`
	`58`	`+ &:hover {`
	`59`	`+ background: helpers.backgroundColor(variables.$secondary);`
	`60`	`+ }`
	`61`	`+ }`
`53`	`62`	`}`
`54`	`63`
`55`	`64`	`}`
`@@ -94,7 +103,7 @@`
`94`	`103`	`}`
`95`	`104`
`96`	`105`	`.card--border-#{$name} {`
`97`		`- box-shadow: inset 0 0 0 1px helpers.borderColor($color);`
	`106`	`+ box-shadow: 1px solid helpers.borderColor($color);`
`98`	`107`	`}`
`99`	`108`
`100`	`109`	`.card--border--dashed {`