Improve UI

damnUUUU · May 21, 2023 · 87d8cc9 · 87d8cc9
1 parent c21638c
commit 87d8cc9
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 27 deletions.
diff --git a/src/assets/images/github.svg b/src/assets/images/github.svg
diff --git a/src/assets/images/logo_plus_title.svg b/src/assets/images/logo_plus_title.svg
diff --git a/src/components/Home/SelectBoxDialog.vue b/src/components/Home/SelectBoxDialog.vue
@@ -44,7 +44,6 @@ export default defineComponent({
  left: 0;
  box-shadow: var(--color-shadow-bold);
  border-radius: 12px;
- padding: 12px 24px;
  width: 240px;
  height: auto;
  background-color: white;
@@ -57,8 +56,13 @@ export default defineComponent({
 .select-box-dialog__option-wrapper {
  display: flex;
  align-items: center;
- padding: 12px 0;
+ border-radius: 12px;
+ padding: 18px 24px;
  cursor: pointer;
+
+ &:hover {
+ background-color: var(--color-surface-superlight);
+ }
 }
 
 .select-box-dialog__option-text {

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -2,16 +2,16 @@
  <div :class="$style['page']">
  <header :class="$style['page__header']">
  <img
- src="@/assets/images/logo_plus_title.svg"
+ src="@/assets/images/logo.svg"
  :class="$style['page__logo']"
  alt="Geoguess Master Logo"
  />
  <Space />
- <a href="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/spider-hand/Geoguess-Master">
- <GithubIcon
- fillColor="var(--color-surface-primary)"
- id="githib-icon"
- :size="36"
+ <a href="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/spider-hand/GeoguessMaster">
+ <img
+ src="@/assets/images/github.svg"
+ :class="$style['page__github-ribbon']"
+ alt="Fork me on Github"
  />
  </a>
  </header>
@@ -40,22 +40,20 @@
  }"
  >
  All rights reserved. Copyright © {{ new Date().getFullYear() }}
- <strong>Spider Hand</strong>
+ <strong>GeoguessMaster</strong>
  </span>
  </footer>
  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import GithubIcon from "vue-material-design-icons/Github.vue";
 import Space from "@/components/Space.vue";
 import AuroraBackground from "@/components/AuroraBackground.vue";
 import CreateGameForm from "@/components/Home/CreateGameForm.vue";
 
 export default defineComponent({
  components: {
- GithubIcon,
  Space,
  AuroraBackground,
  CreateGameForm,
@@ -97,6 +95,12 @@ export default defineComponent({
  }
 }
 
+.page__github-ribbon {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
 .page__container {
  @include pagePadding;
  display: flex;