App directory refactoring

apps/link/app/_styles/global.css

@@ -0,0 +1,94 @@
+body {
+  overscroll-behavior-x: none;
+  overscroll-behavior-y: none;
+  text-size-adjust: none;
+}
+
+.internal-note .cs-message__content {
+  background-color: #FFB62088 !important;
+  border: 2px solid #FFB620 !important;
+  border-radius: 0 !important;
+  margin: 12px;
+  font-family: Roboto !important;
+  font-size: 16px !important;
+  padding: 20px !important;
+  width: 300px;
+}
+
+.incoming-message .cs-message__content {
+  color: black !important;
+  background-color: #ddd !important;
+  border-radius: 14px !important;
+  margin: 12px;
+  font-family: Roboto !important;
+  font-size: 16px !important;
+  padding: 20px !important;
+
+}
+
+.outgoing-message {
+  margin-left: calc(100% - 550px) !important;
+  margin-right: 0 !important;
+
+}
+
+.internal-note {
+  margin-left: calc(100% - 350px) !important;
+  margin-right: 0 !important;
+
+}
+
+.outgoing-message .cs-message__content {
+  color: white !important;
+  background-color: #1982FC !important;
+  border-radius: 14px !important;
+  margin: 12px;
+  font-family: Roboto !important;
+  font-size: 16px !important;
+  padding: 20px !important;
+  width: 500px;
+}
+
+.incoming-message .cs-message__content a {
+  color: white !important;
+}
+
+.outgoing-message .cs-message__content a {
+  color: white !important;
+
+}
+
+.cs-message-input__content-editor-wrapper {
+  background-color: white !important;
+  border: 1px solid #ccc !important;
+  margin: 10px !important;
+}
+
+.cs-message-input__content-editor-container {
+  background-color: white !important;
+}
+
+.cs-message-input__content-editor {
+  background-color: white !important;
+  font-family: Roboto !important;
+}
+
+.cs-conversation-header {
+  background-color: #ddd !important;
+  border: 0 !important;
+  padding: 20px !important;
+  border-bottom: 1px solid #ccc !important;
+}
+
+.cs-message-list {
+  background-color: #eee !important;
+}
+
+.cs-message-input {
+  background-color: #dfdfdf !important;
+}
+
+.cs-main-container {
+  border: 0 !important;
+  border-right: 1px solid #ccc !important;
+}

apps/link/app/_styles/theme.ts

@@ -0,0 +1,86 @@
+export const colors: any = {
+  lightGray: "#ededf0",
+  mediumGray: "#e3e5e5",
+  darkGray: "#33302f",
+  mediumBlue: "#4285f4",
+  green: "#349d7b",
+  lavender: "#a5a6f6",
+  darkLavender: "#5d5fef",
+  pink: "#fcddec",
+  cdrLinkOrange: "#ff7115",
+  coreYellow: "#fac942",
+  helpYellow: "#fff4d5",
+  dwcDarkBlue: "#191847",
+  hazyMint: "#ecf7f8",
+  leafcutterElectricBlue: "#4d6aff",
+  leafcutterLightBlue: "#fafbfd",
+  waterbearElectricPurple: "#332c83",
+  waterbearLightSmokePurple: "#eff3f8",
+  bumpedPurple: "#212058",
+  mutedPurple: "#373669",
+  warningPink: "#ef5da8",
+  lightPink: "#fff0f7",
+  lightGreen: "#f0fff3",
+  lightOrange: "#fff5f0",
+  beige: "#f6f2f1",
+  almostBlack: "#33302f",
+  white: "#ffffff",
+};
+
+export const typography: any = {
+  h1: {
+    fontFamily: "Playfair, serif",
+    fontSize: 45,
+    fontWeight: 700,
+    lineHeight: 1.1,
+    margin: 0,
+  },
+  h2: {
+    fontFamily: "Poppins, sans-serif",
+    fontSize: 35,
+    fontWeight: 700,
+    lineHeight: 1.1,
+    margin: 0,
+  },
+  h3: {
+    fontFamily: "Poppins, sans-serif",
+    fontWeight: 400,
+    fontSize: 27,
+    lineHeight: 1.1,
+    margin: 0,
+  },
+  h4: {
+    fontFamily: "Poppins, sans-serif",
+    fontWeight: 700,
+    fontSize: 18,
+  },
+  h5: {
+    fontFamily: "Roboto, sans-serif",
+    fontWeight: 700,
+    fontSize: 16,
+    lineHeight: "24px",
+    textTransform: "uppercase",
+    textAlign: "center",
+    margin: 1,
+  },
+  h6: {
+    fontFamily: "Roboto, sans-serif",
+    fontWeight: 400,
+    fontSize: 14,
+    textAlign: "center",
+  },
+  p: {
+    fontFamily: "Roboto, sans-serif",
+    fontSize: 17,
+    lineHeight: "26.35px",
+    fontWeight: 400,
+    margin: 0,
+  },
+  small: {
+    fontFamily: "Roboto, sans-serif",
+    fontSize: 13,
+    lineHeight: "18px",
+    fontWeight: 400,
+    margin: 0,
+  },
+};