Make the voting modal look nicer

src/styles/ballot-modal.scss

@@ -1,17 +1,16 @@
 .v-dialog {
  width: fit-content;
- max-width: 90%;
 }
 
 .v-card.ballot-modal {
  padding: 0;
  height: 600px;
+ min-width: 1200px;
  width: fit-content;
- min-width: 1000px;
+ display: flex;
 
  pre,
  code {
- width: 100% !important;
  height: 100%;
  background-color: $cwhqBlue;
  color: $cwhqYellow;
@@ -25,17 +24,23 @@
  padding: 20px;
  }
 
- .main-row {
+
+ > * {
  height: 600px;
+ }
 
- > * {
- height: 600px;
- }
+ .right {
+ width: 380px;
+ }
+
+ .v-form label {
+ font-size: 15px !important;
  }
 
  .left {
  padding: 20px;
  text-align: center;
+ max-width: fit-content;
 
  * {
  box-shadow: none !important;

src/views/Voting/App.vue

@@ -2,7 +2,7 @@
  <v-app class="cwhq-app voting">
  <CWHQ-bar />
  <!-- <app-bar /> -->
- <v-main>
+ <v-main class="voting-main">
  <router-view />
  </v-main>
  <mobile-warning />
@@ -23,3 +23,9 @@ export default {
  }
 };
 </script>
+
+<style lang="scss" scoped>
+.voting-main {
+ background: white;
+}
+</style>

src/views/Voting/CodeModal.vue

@@ -8,79 +8,65 @@
  light
  v-if="isOpen"
  >
- <v-row class="main-row" no-gutters>
- <v-col cols="3" sm="12" md="3" class="left">
- <div class="circle">
- {{ initials }}
- </div>
- <div class="username mb-2">
- {{ username }}
- </div>
- <hr />
- <v-form lazy-validation @submit.prevent="submit">
- <v-text-field
- single-line
- outlined
- solo
- v-bind="fields.email"
- v-model="fields.email.value"
- :disabled="isSubmitting"
- />
+ <!-- <v-row class="main-row" no-gutters> -->
+ <v-col cols="3" sm="12" md="3" class="left">
+ <div class="circle">
+ {{ initials }}
+ </div>
+ <div class="username mb-2">
+ {{ username }}
+ </div>
+ <hr />
+ <v-form lazy-validation @submit.prevent="submit">
+ <v-text-field
+ single-line
+ outlined
+ solo
+ v-bind="fields.email"
+ v-model="fields.email.value"
+ :disabled="isSubmitting"
+ />
+ <v-btn
+ block
+ tile
+ color="cwhqBlue"
+ type="submit"
+ :disabled="isSubmitting"
+ >Confirm Vote</v-btn
+ >
+
+ <v-row no-gutters class="icons" justify="center">
  <v-btn
- block
- tile
+ fab
  color="cwhqBlue"
- type="submit"
- :disabled="isSubmitting"
- >Confirm Vote</v-btn
+ icon
+ target="_blank"
+ :href="facebookUrl"
  >
-
- <v-row no-gutters class="icons" justify="center">
- <v-btn
- fab
- color="cwhqBlue"
- icon
- target="_blank"
- :href="facebookUrl"
- >
- <v-icon>mdi-facebook</v-icon>
- </v-btn>
- <v-btn
- fab
- color="cwhqBlue"
- icon
- target="_blank"
- :href="twitterUrl"
- >
- <v-icon>mdi-twitter</v-icon>
- </v-btn>
- <v-btn
- fab
- color="cwhqBlue"
- icon
- target="_blank"
- :href="mailUrl"
- >
- <v-icon>mdi-email</v-icon>
- </v-btn>
- <v-btn
- fab
- color="cwhqBlue"
- icon
- target="_blank"
- :href="linkUrl"
- >
- <v-icon>mdi-link</v-icon>
- </v-btn>
- </v-row>
- </v-form>
- </v-col>
- <v-col class="right">
- <pre
- v-highlightjs="sourceCode"
- ><code :class="codeType"></code></pre>
- </v-col>
- </v-row>
+ <v-icon>mdi-facebook</v-icon>
+ </v-btn>
+ <v-btn
+ fab
+ color="cwhqBlue"
+ icon
+ target="_blank"
+ :href="twitterUrl"
+ >
+ <v-icon>mdi-twitter</v-icon>
+ </v-btn>
+ <v-btn fab color="cwhqBlue" icon target="_blank" :href="mailUrl">
+ <v-icon>mdi-email</v-icon>
+ </v-btn>
+ <v-btn fab color="cwhqBlue" icon target="_blank" :href="linkUrl">
+ <v-icon>mdi-link</v-icon>
+ </v-btn>
+ </v-row>
+ </v-form>
+ </v-col>
+ <v-col class="right">
+ <pre v-highlightjs="sourceCode"><code :class="codeType"></code></pre>
+ </v-col>
+ <!-- </v-row> -->
  </v-card>
  </v-dialog>