diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.jsx b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.jsx index 52c680657f..a567573b75 100644 --- a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.jsx +++ b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.jsx @@ -32,7 +32,12 @@ const TutorialCard = ({
{tutorials[name].desc}
-
+
); diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.module.css b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.module.css index 8c4b9d9e57..ed3c71cb60 100644 --- a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.module.css +++ b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.module.css @@ -22,14 +22,6 @@ color: var(--grey-5); } -.image { - background-color: #c4c4c4; - width: 9.2rem; - height: 9.2rem; - min-width: 9.2rem; - margin-left: 2.5rem; -} - .progressBarContainer { display: flex; align-items: center; @@ -86,6 +78,54 @@ color: var(--grey-5); } +/* thumnail images */ + +.thumbnail { + width: 9.2rem; + height: 9.2rem; + min-width: 9.2rem; + margin-left: 2.5rem; + background-repeat: no-repeat; + background-size: 100%; + background-position: center; +} + +.decredIntroThumb { + background-image: var(--tutorial-decredIntro-thumb); +} + +.lnThumb { + background-image: var(--tutorial-ln-thumb); +} + +.powPosThumb { + background-image: var(--tutorial-powPos-thumb); +} + +.ticketsThumb { + background-image: var(--tutorial-tickets-thumb); +} + +.stakingThumb { + background-image: var(--tutorial-staking-thumb); +} + +.blocksThumb { + background-image: var(--tutorial-blocks-thumb); +} + +.consensusVotingThumb { + background-image: var(--tutorial-consensusVoting-thumb); +} + +.consensusCodeThumb { + background-image: var(--tutorial-consensusCode-thumb); +} + +.lifecycleThumb { + background-image: var(--tutorial-lifecycle-thumb); +} + @media screen and (max-width: 1180px) { .overview { width: 63.4rem; diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/tutorials.js b/app/components/views/SettingsPage/TutorialsTab/helpers/tutorials.js index 94e4b5be6f..53c18c38ec 100644 --- a/app/components/views/SettingsPage/TutorialsTab/helpers/tutorials.js +++ b/app/components/views/SettingsPage/TutorialsTab/helpers/tutorials.js @@ -6,6 +6,7 @@ tutorials.decredIntro = { title: "Decred Intro", desc: "Small description of the tutorial in 1-2 sentences. Small description of the tutorial in 1-2 sentences. ", // TODO + thumbnailImage: "decredIntroThumb", slides: [ { label: ( @@ -35,6 +36,7 @@ tutorials.ln = { title: "What is Lightning Network?", desc: "Small description of the tutorial in 1-2 sentences. Small description of the tutorial in 1-2 sentences. ", // TODO + thumbnailImage: "lnThumb", slides: [ { label: , @@ -108,7 +110,8 @@ tutorials.ln = { tutorials.consensusCode = { title: "Consensus Code", desc: - "Small description of the tutorial in 1-2 sentences. Small description of the tutorial in 1-2 sentences. ", // TODO + "Small description of decredIntroThumbthe tutorial in 1-2 sentences. Small description of the tutorial in 1-2 sentences. ", // TODO + thumbnailImage: "consensusCodeThumb", slides: [ { label: , // TODO @@ -125,6 +128,7 @@ tutorials.powPos = { title: "Hybrid PoW/PoS", desc: "Small description of the tutorial in 1-2 sentences. Small description of the tutorial in 1-2 sentences. ", // TODO + thumbnailImage: "powPosThumb", slides: [ { label: , // TODO @@ -160,6 +164,7 @@ tutorials.tickets = { title: "Staking and Tickets", desc: "Small description of the tutorial in 1-2 sentences. Small description of the tutorial in 1-2 sentences. ", // TODO + thumbnailImage: "ticketsThumb", slides: [ { label: , // TODO @@ -195,6 +200,7 @@ tutorials.staking = { title: "Core Functions of Staking", desc: "Small description of the tutorial in 1-2 sentences. Small description of the tutorial in 1-2 sentences. ", // TODO + thumbnailImage: "stakingThumb", slides: [ { label: , // TODO @@ -230,6 +236,7 @@ tutorials.lifecycle = { title: "Ticket Lifecycle", desc: "Small description of the tutorial in 1-2 sentences. Small description of the tutorial in 1-2 sentences. ", // TODO + thumbnailImage: "lifecycleThumb", slides: [ { label: ( @@ -298,6 +305,7 @@ tutorials.consensusVoting = { title: "Consensus Voting", desc: "Small description of the tutorial in 1-2 sentences. Small description of the tutorial in 1-2 sentences. ", // TODO + thumbnailImage: "consensusVotingThumb", slides: [ { label: , // TODO @@ -348,6 +356,7 @@ tutorials.blocks = { title: "Block Creation", desc: "Small description of the tutorial in 1-2 sentences. Small description of the tutorial in 1-2 sentences. ", // TODO + thumbnailImage: "blocksThumb", slides: [ { label: ( diff --git a/app/style/icons/tutorials/blocks/thumb.svg b/app/style/icons/tutorials/blocks/thumb.svg new file mode 100644 index 0000000000..6346381d91 --- /dev/null +++ b/app/style/icons/tutorials/blocks/thumb.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/app/style/icons/tutorials/consensusCode/thumb.svg b/app/style/icons/tutorials/consensusCode/thumb.svg new file mode 100644 index 0000000000..417796818c --- /dev/null +++ b/app/style/icons/tutorials/consensusCode/thumb.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/app/style/icons/tutorials/consensusVoting/thumb.svg b/app/style/icons/tutorials/consensusVoting/thumb.svg new file mode 100644 index 0000000000..468947d888 --- /dev/null +++ b/app/style/icons/tutorials/consensusVoting/thumb.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/style/icons/tutorials/decredIntro/thumb.svg b/app/style/icons/tutorials/decredIntro/thumb.svg new file mode 100644 index 0000000000..10b25067a3 --- /dev/null +++ b/app/style/icons/tutorials/decredIntro/thumb.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/app/style/icons/tutorials/lifecycle/thumb.svg b/app/style/icons/tutorials/lifecycle/thumb.svg new file mode 100644 index 0000000000..55daaa3981 --- /dev/null +++ b/app/style/icons/tutorials/lifecycle/thumb.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/style/icons/tutorials/ln/thumb.svg b/app/style/icons/tutorials/ln/thumb.svg new file mode 100644 index 0000000000..bd52ffcd1f --- /dev/null +++ b/app/style/icons/tutorials/ln/thumb.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/style/icons/tutorials/powPos/thumb.svg b/app/style/icons/tutorials/powPos/thumb.svg new file mode 100644 index 0000000000..801f848313 --- /dev/null +++ b/app/style/icons/tutorials/powPos/thumb.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/app/style/icons/tutorials/staking/thumb.svg b/app/style/icons/tutorials/staking/thumb.svg new file mode 100644 index 0000000000..e8424942a3 --- /dev/null +++ b/app/style/icons/tutorials/staking/thumb.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/app/style/icons/tutorials/tickets/thumb.svg b/app/style/icons/tutorials/tickets/thumb.svg new file mode 100644 index 0000000000..c1eb04d75f --- /dev/null +++ b/app/style/icons/tutorials/tickets/thumb.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/style/themes/icons.js b/app/style/themes/icons.js index f4ef4c0c13..2b25424674 100644 --- a/app/style/themes/icons.js +++ b/app/style/themes/icons.js @@ -182,6 +182,9 @@ const icons = { // tutorials // // consensusCode + "tutorial-consensusCode-thumb": url( + require("style/icons/tutorials/consensusCode/thumb.svg") + ), "tutorial-consensusCode-slide1-1": url( require("style/icons/tutorials/consensusCode/consensus-slide1-1.svg") ), @@ -189,6 +192,7 @@ const icons = { require("style/icons/tutorials/consensusCode/consensus-slide1-2.svg") ), // LN + "tutorial-ln-thumb": url(require("style/icons/tutorials/ln/thumb.svg")), "tutorial-ln-slide1": url(require("style/icons/tutorials/ln/ln-slide1.svg")), "tutorial-ln-slide2": url(require("style/icons/tutorials/ln/ln-slide2.svg")), "tutorial-ln-slide3": url(require("style/icons/tutorials/ln/ln-slide3.svg")), @@ -196,6 +200,9 @@ const icons = { "tutorial-ln-slide5": url(require("style/icons/tutorials/ln/ln-slide5.svg")), "tutorial-ln-slide6": url(require("style/icons/tutorials/ln/ln-slide6.svg")), // decredIntro + "tutorial-decredIntro-thumb": url( + require("style/icons/tutorials/decredIntro/thumb.svg") + ), "tutorial-decredIntro-slide1": url( require("style/icons/tutorials/decredIntro/intro-slide1.svg") ), @@ -206,6 +213,9 @@ const icons = { require("style/icons/tutorials/decredIntro/intro-slide2-2.svg") ), // powPos + "tutorial-powPos-thumb": url( + require("style/icons/tutorials/powPos/thumb.svg") + ), "tutorial-powPos-slide1": url( require("style/icons/tutorials/powPos/pos-pow-slide1.svg") ), @@ -216,6 +226,9 @@ const icons = { require("style/icons/tutorials/powPos/pos-pow-slide3.svg") ), // tickets + "tutorial-tickets-thumb": url( + require("style/icons/tutorials/tickets/thumb.svg") + ), "tutorial-tickets-slide1": url( require("style/icons/tutorials/tickets/tickets-slide1.svg") ), @@ -232,6 +245,9 @@ const icons = { require("style/icons/tutorials/tickets/tickets-slide3-2.svg") ), // staking + "tutorial-staking-thumb": url( + require("style/icons/tutorials/staking/thumb.svg") + ), "tutorial-staking-slide1": url( require("style/icons/tutorials/staking/staking-slide1.svg") ), @@ -251,6 +267,9 @@ const icons = { require("style/icons/tutorials/staking/staking-slide4-2.svg") ), // blocks + "tutorial-blocks-thumb": url( + require("style/icons/tutorials/blocks/thumb.svg") + ), "tutorial-blocks-slide1": url( require("style/icons/tutorials/blocks/blocks-slide1.svg") ), @@ -267,6 +286,9 @@ const icons = { require("style/icons/tutorials/blocks/blocks-slide5.svg") ), // consensusVoting + "tutorial-consensusVoting-thumb": url( + require("style/icons/tutorials/consensusVoting/thumb.svg") + ), "tutorial-consensusVoting-slide1": url( require("style/icons/tutorials/consensusVoting/consensusvoting-slide1.svg") ), @@ -289,6 +311,9 @@ const icons = { require("style/icons/tutorials/consensusVoting/consensusvoting-slide7.svg") ), // lifecycle + "tutorial-lifecycle-thumb": url( + require("style/icons/tutorials/lifecycle/thumb.svg") + ), "tutorial-lifecycle-slide1-1": url( require("style/icons/tutorials/lifecycle/lifecycle-slide1-1.svg") ),