Feat/define buttons and colors (#718)

* feat: add gdk colors

* feat: add button components

* feat: add option for icon within button components

* feat: added necessary font weights and default text color

* feat: remove margin from tertiary button

* feat: remove woff files remove pointer-event and refactor destructive buttons

* feat: cleanup profile tsx

Author: aeschi

public/fonts/IBMPlexSans-Bold.woff

@@ -0,0 +1,26 @@
+import React from "react";
+
+export interface PrimaryDestructiveButtonProps {
+  label: string | React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+const PrimaryDestructiveButton: React.FC<PrimaryDestructiveButtonProps> = ({
+  label,
+  onClick,
+  disabled,
+}) => {
+  return (
+    <button
+      className={`text-gdk-white bg-gdk-dark-red hover:bg-gdk-light-red disabled:bg-gdk-light-gray 
+      my-4 flex  h-[51px] w-fit items-center justify-center rounded-[10px] px-8 py-3.5 font-semibold`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <span className="flex flex-row  items-center gap-3">{label}</span>
+    </button>
+  );
+};
+
+export default PrimaryDestructiveButton;

public/fonts/IBMPlexSans-Bold.woff2

@@ -0,0 +1,26 @@
+import React from "react";
+
+export interface PrimaryButtonProps {
+  label: string | React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+const PrimaryButton: React.FC<PrimaryButtonProps> = ({
+  label,
+  onClick,
+  disabled,
+}) => {
+  return (
+    <button
+      className={`text-gdk-white bg-gdk-blue hover:bg-gdk-light-blue disabled:bg-gdk-light-gray 
+      my-4 flex h-[51px] w-fit items-center justify-center rounded-[10px] px-8 font-semibold`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <span className="flex flex-row  items-center gap-3">{label}</span>
+    </button>
+  );
+};
+
+export default PrimaryButton;

public/fonts/IBMPlexSans-BoldItalic.woff

@@ -0,0 +1,27 @@
+import React from "react";
+
+export interface SecondaryButtonProps {
+  label: string | React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+const SecondaryButton: React.FC<SecondaryButtonProps> = ({
+  label,
+  onClick,
+  disabled,
+}) => {
+  return (
+    <button
+      className={`bg-gdk-white outline-gdk-blue text-gdk-blue enabled:hover:bg-gdk-light-blue hover:text-gdk-white 
+      disabled:outline-gdk-light-gray disabled:text-gdk-light-gray  
+       my-4 flex  h-[51px] w-fit items-center justify-center rounded-[10px] px-8 py-3.5 font-semibold outline outline-2`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <span className="flex flex-row  items-center gap-3">{label}</span>
+    </button>
+  );
+};
+
+export default SecondaryButton;

public/fonts/IBMPlexSans-BoldItalic.woff2

@@ -0,0 +1,28 @@
+import React from "react";
+
+export interface TertiaryDestructiveButtonProps {
+  label: string | React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+const TertiaryDestructiveButton: React.FC<TertiaryDestructiveButtonProps> = ({
+  label,
+  onClick,
+  disabled,
+}) => {
+  return (
+    <button
+      className={`hover:text-bg-gdk-light-blue disabled:text-gdk-light-gray enabled:hover:text-gdk-light-blue
+      text-gdk-dark-red enabled:hover:text-gdk-light-red" flex h-[51px] w-fit items-center justify-center rounded-[10px] 
+      p-3.5 font-semibold
+        `}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <span className="flex flex-row  items-center gap-3">{label}</span>
+    </button>
+  );
+};
+
+export default TertiaryDestructiveButton;

public/fonts/IBMPlexSans-Italic.woff2

@@ -0,0 +1,26 @@
+import React from "react";
+
+export interface TertiaryButtonProps {
+  label: string | React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+const TertiaryButton: React.FC<TertiaryButtonProps> = ({
+  label,
+  onClick,
+  disabled,
+}) => {
+  return (
+    <button
+      className={`hover:text-bg-gdk-light-blue disabled:text-gdk-light-gray enabled:hover:text-gdk-light-blue
+      text-gdk-blue flex h-[51px] w-fit items-center justify-center rounded-[10px] p-3.5 font-semibold`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <span className="flex flex-row  items-center gap-3">{label}</span>
+    </button>
+  );
+};
+
+export default TertiaryButton;

public/fonts/IBMPlexSans-Medium.woff2

@@ -0,0 +1,20 @@
+import React from "react";
+
+const WateringIcon: React.FC = () => {
+  return (
+    <svg
+      width="34"
+      height="29"
+      viewBox="0 0 34 29"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M28.0506 5.91941C26.7928 7.16471 26.4698 8.95588 27.0647 10.4912L22.1013 15.4724V11.9412C22.1013 11.0029 21.3364 10.2353 20.4015 10.2353H18.6507C18.7017 9.9453 18.7017 9.67236 18.7017 9.38236C18.7017 4.19647 14.5201 4.12606e-06 9.35266 4.12606e-06C7.42709 -0.00180819 5.54798 0.593448 3.97239 1.70435C2.3968 2.81524 1.20168 4.38753 0.550503 6.20612C-0.100671 8.02471 -0.17609 10.0008 0.334562 11.864C0.845214 13.7273 1.917 15.3867 3.4033 16.6153V27.2941C3.4033 28.2324 4.16822 29 5.10311 29H20.4015C21.3364 29 22.1013 28.2324 22.1013 27.2941V20.2829L29.4615 12.8965C30.9913 13.4935 32.7761 13.1865 34 11.9412L28.0506 5.91941ZM3.48829 10.2353C3.45429 9.9453 3.4033 9.67236 3.4033 9.38236C3.4033 6.09 6.07201 3.41177 9.35266 3.41177C12.6333 3.41177 15.302 6.09 15.302 9.38236C15.302 9.67236 15.251 9.9453 15.217 10.2353M18.7017 25.5882H6.80293V13.6471H18.7017V25.5882Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default WateringIcon;

public/fonts/IBMPlexSans-Regular.woff2

@@ -1,3 +1,44 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  html {
+    @apply text-gdk-gray;
+  }
+
+  @font-face {
+    font-family: "IBM";
+    font-style: normal;
+    font-weight: 700;
+    src: url("/fonts/IBMPlexSans-Bold.woff2");
+  }
+
+  @font-face {
+    font-family: "IBM";
+    font-style: italic;
+    font-weight: 400;
+    src: url("/fonts/IBMPlexSans-Italic.woff2");
+  }
+
+  @font-face {
+    font-family: "IBM";
+    font-style: normal;
+    font-weight: 500;
+    src: url("/fonts/IBMPlexSans-Medium.woff2");
+  }
+
+  @font-face {
+    font-family: "IBM";
+    font-style: normal;
+    font-weight: 400;
+    src: url("/fonts/IBMPlexSans-Regular.woff2");
+  }
+
+  @font-face {
+    font-family: "IBM";
+    font-style: normal;
+    font-weight: 600;
+    src: url("/fonts/IBMPlexSans-Medium.woff2");
+  }
+}

public/fonts/IBMPlexSans-SemiBold.woff2

@@ -2,7 +2,26 @@
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        sans: ["IBM", "sans-serif"],
+      },
+      colors: {
+        "gdk-gray": "#2C303B",
+        "gdk-light-gray": "#808080",
+        "gdk-white": "#FEFEFE",
+        "gdk-blue": "#1169EE",
+        "gdk-light-blue": "#96BCF4",
+        "gdk-lighter-blue": "#E7F0FD",
+        "gdk-dark-red": "#BD0909",
+        "gdk-light-red": "#C75555",
+        "gdk-neon-green": "#3DF99A",
+        "gdk-tree-green": "#CAE11F",
+        "gdk-dark-blue": "#0948A7",
+        "gdk-dark-green": "#07964E",
+        "gdk-purple": "#660A9C",
+      },
+    },
   },
   plugins: [],
 };