Merge pull request #145 from Magpie-Monitor/adam-lamers/final-client-…

…fixes
Magpie-Monitor · Dec 11, 2024 · bb05014 · bb05014
2 parents 31a9488 + aa6747f
commit bb05014
Show file tree

Hide file tree

Showing 23 changed files with 3,418 additions and 1,053 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -10,18 +10,26 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@internationalized/date": "^3.5.5",
+    "@nextui-org/date-picker": "^2.3.3",
+    "@nextui-org/system": "^2.4.3",
+    "@nextui-org/theme": "^2.4.1",
     "@react-spring/web": "^9.7.5",
+    "autoprefixer": "^10.4.20",
     "axios": "^1.7.2",
     "chart.js": "^4.4.3",
     "chartjs-adapter-moment": "^1.0.1",
+    "framer-motion": "^11.13.1",
     "moment": "^2.30.1",
+    "postcss": "^8.4.49",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-countup": "^6.5.3",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1",
     "react-toastify": "^10.0.5",
-    "sass": "^1.77.2"
+    "sass": "^1.77.2",
+    "tailwindcss": "^3.4.16"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

diff --git a/client/postcss.config.js b/client/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/client/src/components/IncidentList/IncidentList.tsx b/client/src/components/IncidentList/IncidentList.tsx
@@ -23,7 +23,7 @@ const IncidentList = ({ incidents, onClick }: IncidentListProps) => {
     leave: { opacity: 0, transform: 'translateY(20px)' },
     config: { duration: 100 }, // Animation duration
     keys: incidents.map((incident) => incident.id), // Ensure unique keys
-    trail: 200,
+    trail: 100,
   });
 
   if (incidents.length === 0) {
@@ -43,7 +43,7 @@ const IncidentList = ({ incidents, onClick }: IncidentListProps) => {
           style={style}
           className="incident-list__entry"
           key={incident.id}
-          onClick={onClick ? () => onClick(incident) : () => {}}
+          onClick={onClick ? () => onClick(incident) : () => { }}
         >
           <div className="incident-list__entry__source">{incident.source}</div>
           <div

diff --git a/client/src/components/LabelField/LabelField.scss b/client/src/components/LabelField/LabelField.scss
@@ -12,5 +12,6 @@
   &__field {
     color: $navbar-text-color;
     font-size: 1rem;
+    word-break: break-all;
   }
 }
diff --git a/client/src/components/PieChart/PieChart.tsx b/client/src/components/PieChart/PieChart.tsx
@@ -38,6 +38,13 @@ const PieChart = ({ data, label }: PieChartProps) => {
       legend: {
         display: true,
         position: 'bottom',
+        labels: {
+          font: {
+            family: 'Roboto',
+            weight: 'bold',
+          },
+          color: 'white',
+        },
       },
       title: {
         display: true,

diff --git a/client/src/components/SVGIcon/SVGIcon.scss b/client/src/components/SVGIcon/SVGIcon.scss
@@ -59,7 +59,8 @@
 
 .application-incident-metadata-icon {
   @extend .svg-icon;
-  mask: url('/src/assets/application-incident-metadata-icon.svg') no-repeat center;
+  mask: url('/src/assets/application-incident-metadata-icon.svg') no-repeat
+    center;
 }
 
 .node-incident-metadata-icon {
@@ -385,6 +386,19 @@
   mask: url('/src/assets/date-range-icon.svg') no-repeat center;
 }
 
+.date-range-selector-icon {
+  @extend .svg-icon;
+  mask: url('/src/assets/date-range-icon.svg') no-repeat center;
+
+  .svg-icon {
+    background-color: $component-border-color;
+
+    &:hover {
+      background-color: $green;
+    }
+  }
+}
+
 .precision-icon {
   @extend .svg-icon;
   mask: url('/src/assets/precision-icon.svg') no-repeat center;

diff --git a/client/src/components/StatItem/StatItem.scss b/client/src/components/StatItem/StatItem.scss
@@ -14,11 +14,13 @@
     font-size: 15px;
     font-weight: bold;
     color: $font-color;
+    word-break: break-all;
   }
 
   &__value {
     display: flex;
     align-items: baseline;
+    word-break: break-all;
   }
 
   &__number {

diff --git a/client/src/components/Table/Table.scss b/client/src/components/Table/Table.scss
@@ -1,6 +1,6 @@
 @import '@/variables';
 
-.table {
+.grid-table {
   display: grid;
   grid-template-columns: repeat(100);
   background-color: transparent;

diff --git a/client/src/components/Table/Table.tsx b/client/src/components/Table/Table.tsx
@@ -57,11 +57,11 @@ function TableBodyRow<Row extends TableRow>({
   alignLeft,
 }: TableRowProps<Row>): React.ReactNode {
   return (
-    <div className="table__row">
+    <div className="grid-table__row">
       {columns.map((column: TableColumn<Row>, index) => (
         <div
           key={index}
-          className={'table__cell'}
+          className={'grid-table__cell'}
           style={getCellRowSpan(columns, alignLeft)}
         >
           {column.customComponent
@@ -82,19 +82,19 @@ function Table<T extends TableRow>({
   const tableStyle = maxHeight ? getTableStyle(maxHeight) : {};
 
   return (
-    <div className="table">
-      <div className="table__headers">
+    <div className="grid-table">
+      <div className="grid-table__headers">
         {columns.map((column: TableColumn<T>, index: number) => (
           <div
             key={index}
-            className="table__header"
+            className="grid-table__header"
             style={getCellRowSpan(columns, alignLeft)}
           >
             {column.header}
           </div>
         ))}
       </div>
-      <div className="table__body" style={tableStyle}>
+      <div className="grid-table__body" style={tableStyle}>
         {rows.map((row: T, index: number) => (
           <TableBodyRow
             key={index}

diff --git a/client/src/components/TagButton/TagButton.scss b/client/src/components/TagButton/TagButton.scss
@@ -1,8 +1,6 @@
 @import '@/variables';
 
 .tag-button {
-  position: relative;
-  width: 100%;
   max-width: 8rem;
 
   &__toggle {
@@ -18,7 +16,9 @@
     width: 100%;
     font-size: 0.9rem;
     outline: none;
-    transition: background-color 0.2s, color 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s;
 
     .svg-icon {
       background-color: $green;
@@ -49,19 +49,22 @@
     padding: 0;
     margin: 0;
     border: 1px solid $green;
+
+    z-index: 10;
     background-color: $component-background;
     color: $green;
-    width: 100%;
+
     border-radius: 4px;
-    z-index: 9999;
     transition: opacity 0.2s ease;
     opacity: 0;
     animation: fadeIn 0.15s forwards;
 
     &__element {
       padding: 0.4rem 0.8rem;
       font-size: 0.85rem;
+      height: 20px;
       cursor: pointer;
+      transform: translate(0, 0);
       border-bottom: 1px solid $green;
 
       &:last-child {
@@ -81,7 +84,8 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
-}
+}