Merge pull request #85 from GEWIS/feature/theme-basic

Added basic theme

src/App.vue

@@ -8,9 +8,3 @@ import Toast from "primevue/toast";
   <Toast />
   <RouterView />
 </template>
-
-<style lang="scss">
-body {
-  margin: 0;
-}
-</style>

src/assets/base.css

@@ -50,16 +50,9 @@
   }
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  /*margin: 0;*/
-  font-weight: normal;
-}
-
 body {
   min-height: 100vh;
+  margin: 0;
   color: var(--color-text);
   background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;

src/assets/main.css

@@ -4,14 +4,7 @@
 
 #app {
 
-  font-weight: normal;
-}
-
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
+  //font-weight: normal;
 }
 
 @media (min-width: 1024px) {

src/components/AddContainerDialogComponent.vue

@@ -48,8 +48,8 @@
           <span class="error-text">{{ errors.isPublic }}</span>
         </div>
         <div class="row" id="actions">
-          <Button severity="danger" outlined @click="closeDialog">{{ $t("c_containerEditModal.cancel") }}</Button>
-          <Button severity="danger" type="submit">{{ $t("c_containerEditModal.save") }}</Button>
+          <Button outlined @click="closeDialog">{{ $t("c_containerEditModal.cancel") }}</Button>
+          <Button type="submit">{{ $t("c_containerEditModal.save") }}</Button>
         </div>
       </form>
     </div>

src/components/CardComponent.vue

@@ -1,11 +1,18 @@
 <template>
-  <Panel :header="header.toUpperCase()" class="card">
+  <Panel :header="header.toUpperCase()" class="text-primary">
     <template #icons>
       <slot name="topAction" />
     </template>
     <slot />
     <template v-if="action" #footer>
-      <Button severity="secondary" id="bottom-left-button" @click="handleClick">{{ action.toUpperCase() }}</Button>
+      <Button
+        severity="secondary"
+        id="bottom-left-button"
+        @click="handleClick"
+        class="w-full text-primary surface-100 border-none px-3 py-3 font-normal"
+      >
+        {{ action.toUpperCase() }}
+      </Button>
     </template>
   </Panel>
 </template>
@@ -46,43 +53,6 @@ const handleClick = () => {
 };
 </script>
 
-<style scoped>
-.card {
-  position: relative;
-}
-#bottom-left-button {
-  width: 100%;
-  color: #d40000!important;
-  background-color: #f2f2f2;
-  padding: 1rem 1.25rem;
-  font-family: Lato,Arial,sans-serif!important;
-  font-weight: 400;
-  border: none #dee2e6;
-}
-
-:deep(.p-panel-header) {
-  color: #d40000!important;
-  font-family: Lato,Arial,sans-serif!important;
-  font-weight: 400;
-  padding-top: 0!important;
-  padding-bottom: 0!important;
-  background-color: #f8f8f8!important;
-}
-
-:deep(.p-panel-content) {
-  background-color: #f8f8f8!important;
-  padding: 1rem 2rem!important;
-}
-
-:deep(.p-panel-footer) {
-  padding: 0!important;
-}
-
-.card {
-  color: #d40000!important;
-}
-
-:deep(.p-panel-header .p-panel-title){
-  padding: 1.25rem 0;
-}
+<style scoped lang="scss">
 </style>
+

src/components/ChangeApiKeyComponent.vue

@@ -5,7 +5,7 @@
       <p>{{apiKeyMessage || '&nbsp;'}}</p>
     </div>
     <div style="margin-top: 1rem">
-      <Button severity="danger" :label="t('profile.keyGetNew')" @click="updateApiKey" />
+      <Button :label="t('profile.keyGetNew')" @click="updateApiKey" />
     </div>
   </CardComponent>
 </template>

src/components/ChangeInfoComponent.vue

@@ -19,7 +19,6 @@
       </div>
       <div style="margin-top: 1rem">
         <Button
-          severity="danger"
           :disabled="!isLocal"
           :label="$t('profile.updateInfo')"
           type="submit"

src/components/ChangePasswordComponent.vue

@@ -13,7 +13,6 @@
       </div>
       <div style="margin-top: 1rem">
         <Button
-          severity="danger"
           :disabled="!isLocal"
           :label="t('profile.passwordUpdate')"
           type="submit"

src/components/ChangePinComponent.vue

@@ -12,7 +12,7 @@
         <small class="warning">{{errors.pinConfirm || '&nbsp;'}}</small>
       </div>
       <div style="margin-top: 1rem">
-        <Button severity="danger" type="submit" :label="t('profile.pinChange')" />
+        <Button type="submit" :label="t('profile.pinChange')" />
       </div>
     </form>
   </CardComponent>

src/components/Mutations/MutationsTableComponent.vue

@@ -135,30 +135,4 @@ async function getMutations(take: number, skip: number):
 </script>
 
 <style lang="scss" scoped>
-:deep(.p-datatable .p-datatable-thead > tr > th) {
-  background-color: #f8f8f8;
-  border-top: none;
-  text-transform: uppercase;
-  font-family: Lato, Arial, sans-serif !important;
-  font-size: 1rem;
-  padding: 0.375rem 0;
-  line-height: 1.5;
-}
-
-:deep(.p-datatable .p-datatable-tbody > tr) {
-  background-color: #f8f8f8;
-}
-
-:deep(.p-datatable .p-paginator) {
-  background-color: #f8f8f8;
-}
-
-:deep(.p-datatable .p-datatable-tbody > tr > td) {
-  border: none;
-  padding: 0.375rem 0;
-  font-size: 1rem;
-  font-family: Lato, Arial, sans-serif !important;
-}
-
-
 </style>

src/components/ProductCreateComponent.vue

@@ -52,7 +52,7 @@
           <span class="error-text">{{ errors.owner }}</span>
         </div>
         <div class="button-row">
-          <Button type="submit" severity="danger" class="save-button">{{ $t('c_productEditModal.save') }}</Button>
+          <Button type="submit" class="save-button">{{ $t('c_productEditModal.save') }}</Button>
         </div>
       </form>
     </div>

src/components/TermsOfServiceModal.vue

@@ -15,7 +15,7 @@
             <div v-html="tos"></div>
         </div>
         <template #footer>
-            <Button label="Ok" severity="danger" @click="visible = false" autofocus />
+            <Button label="Ok" @click="visible = false" autofocus />
         </template>
     </Dialog>
 </template>