feat(Frontend V2): Add global colors (#98)

mslaursen · web-flow · commit 6f5b1f2b9264 · 2025-08-03T02:45:25.000+02:00
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -51,7 +51,7 @@ body {
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: #f4f4f0;
+  background-color: var(--color-background);
 }
 
 .header {
diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
@@ -2,3 +2,11 @@ body {
   font-family: "DM Sans", sans-serif;
   font-optical-sizing: auto;
 }
+
+:root {
+  --color-primary: #5294fd;
+  --color-secondary: #dcebfe;
+  --color-success: #b8fd9f;
+  --color-danger: #ff6b6b;
+  --color-background: #f4f4f0;
+}
diff --git a/frontend/src/components/StepWizard.vue b/frontend/src/components/StepWizard.vue
@@ -87,7 +87,7 @@ const goToStep = (index) => {
 }
 
 .step.active {
-  background-color: #ffdb58;
+  background-color: var(--color-primary);
 }
 
 .step.completed {
@@ -123,7 +123,7 @@ const goToStep = (index) => {
   padding: 0.5rem 1rem;
   border: 2px solid black;
   border-radius: 4px;
-  background-color: #f4f4f0;
+  background-color: var(--color-background);
   box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
   transition:
     transform 0.1s ease-in-out,
diff --git a/frontend/src/components/modal/AddFieldModal.vue b/frontend/src/components/modal/AddFieldModal.vue
@@ -115,7 +115,7 @@ const saveField = () => {
   border-radius: 4px;
   padding: 0.5rem;
   box-shadow: 3px 3px 0px black;
-  background-color: #f4f4f0;
+  background-color: var(--color-background);
   transition:
     transform 0.1s ease-in-out,
     box-shadow 0.1s ease-in-out;
@@ -141,7 +141,7 @@ const saveField = () => {
   border: 2px solid black;
   border-radius: 4px;
   font-weight: bold;
-  background-color: #2fff2f;
+  background-color: var(--color-success);
   box-shadow: 3px 3px 0px black;
   transition:
     transform 0.1s ease-in-out,
diff --git a/frontend/src/components/modal/AddRelationModal.vue b/frontend/src/components/modal/AddRelationModal.vue
@@ -113,7 +113,7 @@ const saveSelect = () => {
   border-radius: 4px;
   padding: 0.5rem;
   box-shadow: 3px 3px 0px black;
-  background-color: #f4f4f0;
+  background-color: var(--color-background);
   transition:
     transform 0.1s ease-in-out,
     box-shadow 0.1s ease-in-out;
@@ -139,7 +139,7 @@ const saveSelect = () => {
   border: 2px solid black;
   border-radius: 4px;
   font-weight: bold;
-  background-color: #2fff2f;
+  background-color: var(--color-success);
   box-shadow: 3px 3px 0px black;
   transition:
     transform 0.1s ease-in-out,
diff --git a/frontend/src/components/modal/EditFieldModal.vue b/frontend/src/components/modal/EditFieldModal.vue
@@ -86,7 +86,6 @@ const deleteField = () => {
   flex-direction: column;
   gap: 1rem;
   padding: 1rem;
-  background-color: #ffdb58;
 }
 
 .input-container {
@@ -133,7 +132,7 @@ const deleteField = () => {
   padding: 0.5rem 1rem;
   border: 2px solid black;
   border-radius: 4px;
-  background-color: #ff6b6b;
+  background-color: var(--color-danger);
   box-shadow: 3px 3px 0px black;
   transition:
     transform 0.1s ease-in-out,
@@ -151,7 +150,7 @@ const deleteField = () => {
   padding: 0.5rem 1rem;
   border: 2px solid black;
   border-radius: 4px;
-  background-color: #2fff2f;
+  background-color: var(--color-success);
   box-shadow: 3px 3px 0px black;
   transition:
     transform 0.1s ease-in-out,
diff --git a/frontend/src/components/modal/EditRelationModal.vue b/frontend/src/components/modal/EditRelationModal.vue
@@ -135,7 +135,7 @@ const deleteRelation = () => {
   border-radius: 4px;
   padding: 0.5rem;
   box-shadow: 3px 3px 0px black;
-  background-color: #f4f4f0;
+  background-color: var(--color-background);
   transition:
     transform 0.1s ease-in-out,
     box-shadow 0.1s ease-in-out;
@@ -161,7 +161,7 @@ const deleteRelation = () => {
   border: 2px solid black;
   border-radius: 4px;
   font-weight: bold;
-  background-color: #2fff2f;
+  background-color: var(--color-success);
   box-shadow: 3px 3px 0px black;
   transition:
     transform 0.1s ease-in-out,
@@ -180,7 +180,7 @@ const deleteRelation = () => {
   border: 2px solid black;
   border-radius: 4px;
   font-weight: bold;
-  background-color: #ff6b6b;
+  background-color: var(--color-danger);
   box-shadow: 3px 3px 0px black;
   transition:
     transform 0.1s ease-in-out,
diff --git a/frontend/src/components/modal/GlobalModal.vue b/frontend/src/components/modal/GlobalModal.vue
@@ -68,13 +68,13 @@ function close() {
   margin: 0 1rem;
   display: flex;
   flex-direction: column;
+  background-color: var(--color-secondary);
 }
 
 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: #ffdb58;
   padding: 0.75rem 1rem;
 }
 
@@ -96,7 +96,7 @@ function close() {
 }
 
 .modal-body {
-  background-color: #ffdb58;
   overflow: hidden;
+  background-color: var(--color-secondary);
 }
 </style>
diff --git a/frontend/src/components/modal/RenameNodeModal.vue b/frontend/src/components/modal/RenameNodeModal.vue
@@ -61,7 +61,7 @@ const rename = () => {
   border: 2px solid black;
   border-radius: 4px;
   padding: 0.5rem;
-  background-color: #f4f4f0;
+  background-color: var(--color-background);
   box-shadow: 3px 3px 0 black;
   transition:
     transform 0.1s ease-in-out,
@@ -80,7 +80,7 @@ const rename = () => {
   border: 2px solid black;
   border-radius: 4px;
   font-weight: bold;
-  background-color: #2fff2f;
+  background-color: var(--color-success);
   box-shadow: 3px 3px 0 black;
   transition:
     transform 0.1s ease-in-out,
diff --git a/frontend/src/components/schema_editor/CustomNode.vue b/frontend/src/components/schema_editor/CustomNode.vue
@@ -38,7 +38,6 @@
         v-for="field in data.fields"
         :key="field.name"
         class="custom-node-field-row"
-        :class="{ 'primary-key': field.isPrimaryKey }"
         @click="$emit('open-edit-field-modal', props.id, field)"
       >
         <div class="custom-node-field-name">{{ field.name }}</div>
@@ -94,7 +93,7 @@ const closeNodeActions = () => {
 
 .custom-node-title {
   font-weight: bold;
-  background-color: #ffdb58;
+  background-color: var(--color-primary);
   width: 100%;
   height: 100%;
   display: flex;
@@ -110,13 +109,12 @@ const closeNodeActions = () => {
   align-items: center;
   justify-content: center;
   border-left: 2px solid black;
-  background-color: #ffdb58;
+  background-color: var(--color-primary);
 }
 
 .custom-node-body {
   display: flex;
   flex-direction: column;
-  background-color: #ffffff;
   cursor: pointer;
 }
 
@@ -136,13 +134,6 @@ const closeNodeActions = () => {
   border-bottom: none;
 }
 
-.custom-node-field-row.primary-key {
-  background-color: #90ee90;
-}
-.custom-node-field-row.primary-key:hover {
-  background-color: #f8f8f8;
-}
-
 .custom-node-field-name {
   font-weight: 600;
   color: #343a40;
diff --git a/frontend/src/components/schema_editor/SchemaEditor.vue b/frontend/src/components/schema_editor/SchemaEditor.vue
@@ -8,7 +8,19 @@
       </div>
 
       <div class="vue-flow-viewport">
-        <VueFlow v-model:nodes="projectStore.nodes" v-model:edges="projectStore.edges">
+        <VueFlow
+          v-model:nodes="projectStore.nodes"
+          v-model:edges="projectStore.edges"
+          :default-viewport="{ zoom: 2 }"
+          :max-zoom="2"
+          :min-zoom="0.1"
+          :fit-view-on-init="true"
+          :snap-to-grid="true"
+        >
+          <!-- <Background 
+            variant="lines"
+            style="{z-index: -1}"
+          /> -->
           <div class="create-wrapper">
             <div v-if="showInput" class="floating-create-expanded">
               <button class="collapse-btn" @click="showInput = false">
@@ -61,7 +73,6 @@
 import { ref } from "vue"
 import CustomNode from "@/components/schema_editor/CustomNode.vue"
 import "@vue-flow/core/dist/style.css"
-import AppModal from "@/components/modal/AppModal.vue"
 import AddFieldModal from "@/components/modal/AddFieldModal.vue"
 import EditFieldModal from "@/components/modal/EditFieldModal.vue"
 import EditRelationModal from "@/components/modal/EditRelationModal.vue"
@@ -127,7 +138,7 @@ const openEditRelationModal = (id: string, relation: RelationalRelationField) =>
   height: 40px;
   display: flex;
   align-items: center;
-  background-color: #ffdb58;
+  background-color: var(--color-primary);
   width: 100%;
   border-bottom: 2px solid black;
   box-sizing: border-box;
@@ -167,7 +178,7 @@ const openEditRelationModal = (id: string, relation: RelationalRelationField) =>
 .create-circle {
   width: 40px;
   height: 40px;
-  background-color: #ffdb58;
+  background-color: var(--color-primary);
   border: 2px solid black;
   color: black;
   border-radius: 50%;
@@ -193,7 +204,7 @@ const openEditRelationModal = (id: string, relation: RelationalRelationField) =>
 .floating-create-expanded {
   display: flex;
   align-items: center;
-  background: #ffdb58;
+  background: var(--color-primary);
   border: 2px solid black;
   border-radius: 50px;
   height: 40px;
@@ -237,6 +248,6 @@ const openEditRelationModal = (id: string, relation: RelationalRelationField) =>
   font-weight: bold;
 }
 .create-model-btn:hover {
-  background-color: #2fff2f;
+  background-color: var(--color-success);
 }
 </style>
diff --git a/frontend/src/components/steps/DatabaseStep.vue b/frontend/src/components/steps/DatabaseStep.vue
@@ -77,25 +77,25 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #f4f4f0;
+  background-color: var(--color-background);
   transition: all 0.1s ease-in-out;
 }
 
 .db-item.enabled:hover {
   transform: translate(2px, 2px);
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
   cursor: pointer;
-  background-color: #2fff2f;
+  background-color: var(--color-success);
 }
 
 .db-item.enabled.confirmed {
   transform: translate(2px, 2px);
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
-  background-color: #2fff2f;
+  background-color: var(--color-success);
 }
 
 .db-item.enabled.confirmed:hover {
-  background-color: #f4f4f0;
+  background-color: var(--color-background);
   transform: translate(0px, 0px);
   box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
 }
diff --git a/frontend/src/components/steps/ProjectNameStep.vue b/frontend/src/components/steps/ProjectNameStep.vue
@@ -129,7 +129,7 @@ onMounted(() => {
   caret-color: transparent;
   border: 2px solid black;
   border-radius: 4px;
-  background-color: #f4f4f0;
+  background-color: var(--color-background);
   padding: 0.25rem;
   box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
   transition:
@@ -144,14 +144,14 @@ onMounted(() => {
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
   cursor: pointer;
   transition: 0.1s;
-  background-color: #2fff2f;
+  background-color: var(--color-success);
 }
 .confirm-btn.confirmed {
   transition: 0.1s;
-  background-color: #2fff2f;
+  background-color: var(--color-success);
 }
 .confirm-btn.confirmed:hover {
-  background-color: #f4f4f0;
+  background-color: var(--color-background);
   transform: translate(0px, 0px);
   box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
 }
@@ -175,7 +175,7 @@ onMounted(() => {
 .confirm-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
-  background-color: #f4f4f0;
+  background-color: var(--color-background);
 }
 .container {
   display: flex;

Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,7 @@ body {`
`51`	`51`	`display: flex;`
`52`	`52`	`flex-direction: column;`
`53`	`53`	`height: 100%;`
`54`		`- background-color: #f4f4f0;`
	`54`	`+ background-color: var(--color-background);`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`.header {`
Original file line number	Diff line number	Diff line change
`@@ -68,13 +68,13 @@ function close() {`
`68`	`68`	`margin: 0 1rem;`
`69`	`69`	`display: flex;`
`70`	`70`	`flex-direction: column;`
	`71`	`+ background-color: var(--color-secondary);`
`71`	`72`	`}`
`72`	`73`
`73`	`74`	`.modal-header {`
`74`	`75`	`display: flex;`
`75`	`76`	`justify-content: space-between;`
`76`	`77`	`align-items: center;`
`77`		`- background-color: #ffdb58;`
`78`	`78`	`padding: 0.75rem 1rem;`
`79`	`79`	`}`
`80`	`80`
`@@ -96,7 +96,7 @@ function close() {`
`96`	`96`	`}`
`97`	`97`
`98`	`98`	`.modal-body {`
`99`		`- background-color: #ffdb58;`
`100`	`99`	`overflow: hidden;`
	`100`	`+ background-color: var(--color-secondary);`
`101`	`101`	`}`
`102`	`102`	`</style>`