From fd256bab95751e7e9599eb22543c1639baee5256 Mon Sep 17 00:00:00 2001
From: Panagiotis Doulgeris <45369229+Pantastisch@users.noreply.github.com>
Date: Fri, 1 Nov 2024 21:36:17 +0100
Subject: [PATCH 1/2] Show hex color code in filament page and improve styling

---
 client/src/components/spoolIcon.css | 1 -
 client/src/pages/filaments/show.tsx | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/spoolIcon.css b/client/src/components/spoolIcon.css
index be6c36b..616e1fd 100644
--- a/client/src/components/spoolIcon.css
+++ b/client/src/components/spoolIcon.css
@@ -3,7 +3,6 @@
   width: 1.5em;
   height: 2.5em;
   gap: 2px;
-  margin: 0 0.5em;
 }
 
 .spool-icon.vertical {
diff --git a/client/src/pages/filaments/show.tsx b/client/src/pages/filaments/show.tsx
index 574a386..b0aea7a 100644
--- a/client/src/pages/filaments/show.tsx
+++ b/client/src/pages/filaments/show.tsx
@@ -89,6 +89,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
       <TextField value={record?.name} />
       <Title level={5}>{t("filament.fields.color_hex")}</Title>
       {colorObj && <SpoolIcon color={colorObj} size="large" />}
+      {record?.color_hex && <TextField value={`#${record?.color_hex}`} />}
       <Title level={5}>{t("filament.fields.material")}</Title>
       <TextField value={record?.material} />
       <Title level={5}>{t("filament.fields.price")}</Title>

From 6b2dbda354cd7cd9d35124d3153bc877cab41702 Mon Sep 17 00:00:00 2001
From: Panagiotis Doulgeris <45369229+Pantastisch@users.noreply.github.com>
Date: Sun, 22 Dec 2024 15:38:05 +0100
Subject: [PATCH 2/2] Add possibility to exclude margin in spool icon for
 overview sites

---
 client/src/components/spoolIcon.css | 5 +++++
 client/src/components/spoolIcon.tsx | 8 +++++---
 client/src/pages/filaments/show.tsx | 2 +-
 client/src/pages/spools/show.tsx    | 3 ++-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/client/src/components/spoolIcon.css b/client/src/components/spoolIcon.css
index 616e1fd..23583c4 100644
--- a/client/src/components/spoolIcon.css
+++ b/client/src/components/spoolIcon.css
@@ -3,6 +3,7 @@
   width: 1.5em;
   height: 2.5em;
   gap: 2px;
+  margin: 0 0.5em;
 }
 
 .spool-icon.vertical {
@@ -14,6 +15,10 @@
   height: 4em;
 }
 
+.spool-icon.no-margin {
+  margin: 0;
+}
+
 .spool-icon * {
   flex: 1 1 0px;
   border-radius: 2px;
diff --git a/client/src/components/spoolIcon.tsx b/client/src/components/spoolIcon.tsx
index 355f792..fb09721 100644
--- a/client/src/components/spoolIcon.tsx
+++ b/client/src/components/spoolIcon.tsx
@@ -3,13 +3,15 @@ import "./spoolIcon.css";
 interface Props {
   color: string | { colors: string[]; vertical: boolean };
   size?: "small" | "large";
+  no_margin? : boolean
 }
 
-export default function SpoolIcon(props: Props) {
+export default function SpoolIcon(props: Readonly<Props>) {
   let dirClass = "vertical";
   let cols = [];
   let size = props.size ? props.size : "small";
-
+  let no_margin = props.no_margin ? "no-margin" : "";
+  
   if (typeof props.color === "string") {
     cols = [props.color];
   } else {
@@ -18,7 +20,7 @@ export default function SpoolIcon(props: Props) {
   }
 
   return (
-    <div className={"spool-icon " + dirClass + " " + size}>
+    <div className={"spool-icon " + dirClass + " " + size + " " + no_margin}>
       {cols.map((col) => (
         <div
           key={col}
diff --git a/client/src/pages/filaments/show.tsx b/client/src/pages/filaments/show.tsx
index b0aea7a..c9a48f2 100644
--- a/client/src/pages/filaments/show.tsx
+++ b/client/src/pages/filaments/show.tsx
@@ -88,7 +88,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
       <Title level={5}>{t("filament.fields.name")}</Title>
       <TextField value={record?.name} />
       <Title level={5}>{t("filament.fields.color_hex")}</Title>
-      {colorObj && <SpoolIcon color={colorObj} size="large" />}
+      {colorObj && <SpoolIcon color={colorObj} size="large" no_margin />}
       {record?.color_hex && <TextField value={`#${record?.color_hex}`} />}
       <Title level={5}>{t("filament.fields.material")}</Title>
       <TextField value={record?.material} />
diff --git a/client/src/pages/spools/show.tsx b/client/src/pages/spools/show.tsx
index acfb27d..4661b6d 100644
--- a/client/src/pages/spools/show.tsx
+++ b/client/src/pages/spools/show.tsx
@@ -146,7 +146,8 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
       <Title level={5}>{t("spool.fields.id")}</Title>
       <NumberField value={record?.id ?? ""} />
       <Title level={5}>{t("spool.fields.filament")}</Title>
-      {colorObj && <SpoolIcon color={colorObj} />} <TextField value={record ? filamentURL(record?.filament) : ""} />
+      {colorObj && <SpoolIcon color={colorObj} size="large" no_margin />}
+      <TextField value={record ? filamentURL(record?.filament) : ""} />
       <Title level={5}>{t("spool.fields.price")}</Title>
       <NumberField
         value={record ? spoolPrice(record) : ""}