style: adjust download page in mobile screen

rotki · Aug 7, 2023 · 330f08e · 330f08e
1 parent f4e42ab
commit 330f08e
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 25 deletions.
diff --git a/components/download/DownloadDocs.vue b/components/download/DownloadDocs.vue
@@ -21,6 +21,7 @@ const css = useCssModule();
  <ButtonLink
  color="primary"
  variant="default"
+ size="lg"
  external
  to="https://rotki.readthedocs.io/en/latest/index.html"
  >
@@ -43,7 +44,7 @@ const css = useCssModule();
  @apply flex flex-col;
 
  .title {
- @apply text-rui-light-primary text-h6 mb-3;
+ @apply text-rui-light-primary text-h6 mb-3 font-medium;
  }
 
  .heading {

diff --git a/components/download/DownloadHeading.vue b/components/download/DownloadHeading.vue
@@ -48,21 +48,20 @@ const css = useCssModule();
  }
 
  .description {
- @apply text-rui-text text-h4 md:text-h3;
- @apply font-normal #{!important};
+ @apply text-rui-text text-h4;
  }
  }
 
  .links {
- @apply grid gap-6 grid-cols-2 lg:grid-cols-4 mb-6;
+ @apply grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mb-6;
 
  .link {
  @apply w-full;
  }
  }
 
  .version {
- @apply text-body-1 text-rui-light-secondary;
+ @apply text-body-1 text-rui-text-secondary;
  }
  }
 }

diff --git a/components/download/DownloadItem.vue b/components/download/DownloadItem.vue
@@ -16,16 +16,18 @@ const css = useCssModule();
  <div :class="css.icon">
  <RuiIcon :name="icon" color="primary" />
  </div>
- <div>
- <p :class="css.for">{{ t('download.download_for') }}</p>
- <h6 :class="css.platform">{{ platform }}</h6>
- </div>
- <div :class="css.action">
- <a :href="url" download>
- <RuiButton color="primary" size="lg">
- {{ t('download.action') }}
- </RuiButton>
- </a>
+ <div :class="css.body">
+ <div>
+ <p :class="css.for">{{ t('download.download_for') }}</p>
+ <h6 :class="css.platform">{{ platform }}</h6>
+ </div>
+ <div>
+ <a :href="url" download>
+ <RuiButton color="primary" size="lg">
+ {{ t('download.action') }}
+ </RuiButton>
+ </a>
+ </div>
  </div>
  </div>
 </template>
@@ -39,16 +41,16 @@ const css = useCssModule();
  @apply flex items-center justify-center p-3 w-12 h-12 bg-white rounded-[0.625rem] text-rui-primary;
  }
 
- .for {
- @apply text-body-1 text-rui-light-secondary;
+ .body {
+ @apply flex items-end md:items-start justify-between md:flex-col space-x-4 md:space-x-0 md:space-y-4;
  }
 
- .platform {
- @apply text-h6;
+ .for {
+ @apply text-body-1 text-rui-text-secondary;
  }
 
- .action {
- @apply inline-flex grow items-end;
+ .platform {
+ @apply text-h6 font-medium;
  }
 }
 </style>
diff --git a/components/download/DownloadPreview.vue b/components/download/DownloadPreview.vue
@@ -84,10 +84,10 @@ scanImages();
  }
 
  .controls {
- @apply flex flex-col absolute -bottom-[1.75rem] md:-bottom-[3rem] z-10 left-0 right-0 md:-left-6 md:-right-6 items-center justify-center;
+ @apply flex flex-col absolute -bottom-[1.75rem] md:-bottom-[3rem] z-10 -left-2 -right-2 md:-left-6 md:-right-6 items-center justify-center;
 
  .preview {
- @apply px-4 py-3 md:px-8 md:py-6 rounded-xl border border-black/[.12] bg-white text-h5 md:text-h4 font-bold;
+ @apply mt-2 md:mt-0 px-8 py-2 md:py-6 rounded-xl border border-black/[.12] bg-white text-h5 md:text-h4 font-medium;
  box-shadow: 4px 32px 80px 0 rgba(191, 194, 203, 0.24);
  }
  }

diff --git a/locales/en.json b/locales/en.json
@@ -275,7 +275,7 @@
  "download": {
  "heading": {
  "download_rotki": "Download rotki",
- "description": "You can download rotki in your computer and start using it for free right now. Binaries available for all major Operating Systems."
+ "description": "Download now and start using across all major Operating Systems"
  },
  "documentation": {
  "title": "Documentation",

diff --git a/tests/e2e/specs/pages/index.spec.cy.ts b/tests/e2e/specs/pages/index.spec.cy.ts
@@ -34,7 +34,7 @@ describe('Homepage test', () => {
  .get('div')
  .contains(
  'h3',
- 'You can download rotki in your computer and start using it for free right now. Binaries available for all major Operating Systems.',
+ 'Download now and start using across all major Operating Systems',
  )
  .first();