feat: #7502 app market qa (#7509)

* feat: #7502 app market QA * feat: #7502 app market QA * feat: #7502 pr fix
reapit · Aug 11, 2022 · 2d99823 · 2d99823
1 parent d071ef2
commit 2d99823
Show file tree

Hide file tree

Showing 24 changed files with 2,847 additions and 1,662 deletions.
diff --git a/packages/app-market/src/components/apps-browse/__styles__/featured-hero-apps.ts b/packages/app-market/src/components/apps-browse/__styles__/featured-hero-apps.ts
@@ -152,6 +152,8 @@ export const FeaturedHeroAppsIcon = styled.img`
   border-radius: 0.25rem;
   width: 48px;
   height: 48px;
+  padding: 0.25rem;
+  background-color: var(--color-white);
 
   ${forMobileAndAbove} {
     border-radius: 0.5rem;

diff --git a/packages/app-market/src/components/apps-browse/__styles__/hero-apps.ts b/packages/app-market/src/components/apps-browse/__styles__/hero-apps.ts
@@ -106,7 +106,7 @@ export const HeroAppsStrapline = styled(ElBodyText)`
 
 export const HeroAppsInnerContainer = styled.div`
   width: 100%;
-  border-radius: 0.25rem;
+  border-radius: 0.5rem;
   padding: 0.75rem;
 
   ${forMobileAndAbove} {
@@ -203,6 +203,8 @@ export const HeroAppsIcon = styled.img`
   border-radius: 0.25rem;
   width: 40px;
   height: 40px;
+  padding: 0.25rem;
+  background-color: var(--color-white);
 
   ${forMobileAndAbove} {
     margin-bottom: 1.25rem;

diff --git a/packages/app-market/src/components/apps-detail/__styles__/index.ts b/packages/app-market/src/components/apps-detail/__styles__/index.ts
@@ -1,7 +1,8 @@
+import { forDesktopAndAbove } from './../../../core/__styles__/media'
 import { ElModalBody } from './../../../../../elements/src/components/modal/__styles__/index'
 import { css } from '@linaria/core'
 import { styled } from '@linaria/react'
-import { forMobileAndAbove, forTabletAndAbove } from '../../../core/__styles__/media'
+import { forMobileAndAbove, forTabletAndAbove, forWidescreenAndAbove } from '../../../core/__styles__/media'
 
 export const htmlRender = css`
   font-family: var(--font-sans-serif);
@@ -22,25 +23,27 @@ export const htmlRender = css`
 export const AppDetailWrapper = styled.div`
   margin-right: 0.75rem;
   border-radius: 0.25rem;
+  padding: 0.75rem;
   background-color: var(--color-grey-light);
-  width: 48px;
-  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-bottom: 0.75rem;
 
   ${forMobileAndAbove} {
     width: 96px;
     height: 96px;
+    margin-bottom: 0rem;
   }
 `
 
 export const AppDetailIcon = styled.img`
-  border-radius: 1rem;
+  border-radius: 0.25rem;
   width: 48px;
   height: 48px;
 
   ${forMobileAndAbove} {
+    border-radius: 1rem;
     width: 72px;
     height: 72px;
   }
@@ -82,6 +85,10 @@ export const AppDetailDescriptionColMain = styled.div`
   ${forTabletAndAbove} {
     grid-column-end: span 7;
   }
+
+  ${forWidescreenAndAbove} {
+    grid-column-end: span 12;
+  }
 `
 
 export const AppDetailDescriptionColAside = styled.div`
@@ -93,6 +100,20 @@ export const AppDetailDescriptionColAside = styled.div`
     grid-column-end: span 5;
     padding-top: 2.75rem;
   }
+
+  ${forWidescreenAndAbove} {
+    display: none;
+  }
+`
+
+export const AppDetailDescriptionAsideDesktop = styled.div`
+  display: none;
+
+  ${forWidescreenAndAbove} {
+    display: block;
+    margin-left: 1rem;
+    margin-bottom: 1.25rem;
+  }
 `
 
 export const AppDetailBackButton = styled.div`
@@ -103,8 +124,13 @@ export const AppDetailBackButton = styled.div`
   align-items: center;
   border-radius: 0.25rem;
   background-color: var(--color-grey-light);
-  margin-bottom: 0.75rem;
+  margin-bottom: 1.25rem;
   cursor: pointer;
+  margin-top: 0.75rem;
+
+  ${forMobileAndAbove} {
+    margin-top: 0;
+  }
 `
 
 export const AppDetailPermissionChip = styled.div`
@@ -143,3 +169,48 @@ export const appDetailVideoModal = css`
     height: calc(100% - 2.5rem);
   }
 `
+
+export const appDetailInfoLineAdjust = css`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+`
+
+export const AppsDetailContentGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+
+  ${forWidescreenAndAbove} {
+    grid-template-columns: 1fr 2fr;
+    grid-column-gap: 2rem;
+  }
+`
+
+export const AppDetailSupportGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-column-gap: 1rem;
+  grid-row-gap: 1.5rem;
+
+  ${forMobileAndAbove} {
+    grid-column-gap: 2rem;
+    grid-row-gap: 2.5rem;
+  }
+`
+
+export const AppDetailSupportGridCol = styled.div`
+  grid-column-end: span 12;
+
+  ${forMobileAndAbove} {
+    grid-column-end: span 6;
+  }
+
+  ${forDesktopAndAbove} {
+    grid-column-end: span 4;
+  }
+
+  ${forWidescreenAndAbove} {
+    grid-column-end: span 6;
+  }
+`