diff --git a/src/StoreView.tsx b/src/StoreView.tsx index fabca02..aa6bde8 100644 --- a/src/StoreView.tsx +++ b/src/StoreView.tsx @@ -3,9 +3,9 @@ import * as React from 'react'; import { useDispatch } from 'react-redux'; import { IconButton } from './Button'; import './completion'; -import view from './styles/code-view.scss'; -import flex from './styles/flex.scss'; import { actions, EditorMode } from './store'; +import flex from './styles/flex.scss'; +import style from './styles/store-view.scss'; export interface StoreViewProps {} @@ -29,21 +29,21 @@ export function Installer({ needPayment }: Installer) { }, []); return ( -
-
+
+
-

ASSET NAME

- PAID ITEM +

ASSET NAME

+ PAID ITEM
-
+
ASSET DESCRIPTION ASSET DESCRIPTION ASSET DESCRIPTION ASSET DESCRIPTION

How can I use this item?

-
+
Join paid plan to get all items now
diff --git a/src/styles/code-view.scss b/src/styles/code-view.scss index 74fefeb..2684341 100644 --- a/src/styles/code-view.scss +++ b/src/styles/code-view.scss @@ -1,8 +1,6 @@ @import 'color'; @import 'shadow'; -$padding: 4px; - .header { position: sticky; position: -webkit-sticky; @@ -25,45 +23,3 @@ $padding: 4px; color: $textColor; } } - -.installer { - width: 50%; - padding-left: $padding; - - .header { - height: 64px; - margin-left: -$padding; - - img { - max-height: 100%; - } - - .name { - flex-shrink: 0; - } - - .paid { - color: $alterColor; - background-color: $paidColor; - font-size: 12px; - padding: 4px 8px; - border-radius: 2px; - flex-shrink: 0; - margin-left: 16px; - } - - .gif { - flex-shrink: 100; - margin-left: 16px; - } - } - - .description { - margin: 6px 0px 16px 0px; - } - - button { - @include shadow(1); - margin-left: 0px !important; - } -} diff --git a/src/styles/store-view.scss b/src/styles/store-view.scss new file mode 100644 index 0000000..bcd8e70 --- /dev/null +++ b/src/styles/store-view.scss @@ -0,0 +1,46 @@ +@import 'color'; +@import 'shadow'; + +$padding: 4px; + +.installer { + width: 50%; + padding-left: $padding; + + .header { + height: 64px; + margin-left: -$padding; + + img { + max-height: 100%; + } + + .name { + flex-shrink: 0; + } + + .paid { + color: $alterColor; + background-color: $paidColor; + font-size: 12px; + padding: 4px 8px; + border-radius: 2px; + flex-shrink: 0; + margin-left: 16px; + } + + .gif { + flex-shrink: 100; + margin-left: 16px; + } + } + + .description { + margin: 6px 0px 16px 0px; + } + + button { + @include shadow(1); + margin-left: 0px !important; + } +}