Add KnownAppBadge for Voting and DotVoting

(cherry picked from commit 7045292)
aragon · Sep 27, 2019 · bdace18 · bdace18
1 parent c14c46c
commit bdace18
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 4 deletions.
diff --git a/src/templates/kit/screens/DotVotingScreen.js b/src/templates/kit/screens/DotVotingScreen.js
@@ -4,6 +4,7 @@ import { GU, Help, Info } from '@aragon/ui'
 import {
   Duration,
   Header,
+  KnownAppBadge,
   Navigation,
   PercentageField,
   ScreenPropsType,
@@ -34,10 +35,10 @@ function reduceFields(fields, [field, value]) {
   }
   if (field === 'quorum') {
     return { ...fields, quorum: value }
-    }
+  }
   if (field === 'support') {
     return { ...fields, support: value }
-    }
+  }
   return fields
 }
 
@@ -150,7 +151,29 @@ function DotVotingScreen({
     >
       <Header
         title="Configure template"
-        subtitle="Choose your Dot Voting app settings below"
+        subtitle={
+          <span
+            css={`
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            `}
+          >
+            Choose your
+            <span
+              css={`
+                display: flex;
+                margin: 0 ${1.5 * GU}px;
+              `}
+            >
+              <KnownAppBadge
+                appName="dot-voting.hatch.aragonpm.eth"
+                label="Dot Voting"
+              />
+            </span>
+            settings below.
+          </span>
+        }
       />
       <PercentageField
         ref={handleSupportRef}

diff --git a/src/templates/kit/screens/VotingScreen.js b/src/templates/kit/screens/VotingScreen.js
@@ -4,6 +4,7 @@ import { GU, Help, Info } from '@aragon/ui'
 import {
   Duration,
   Header,
+  KnownAppBadge,
   Navigation,
   PercentageField,
   ScreenPropsType,
@@ -137,7 +138,26 @@ function VotingScreen({
     >
       <Header
         title="Configure template"
-        subtitle="Choose your Voting app settings below."
+        subtitle={
+          <span
+            css={`
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            `}
+          >
+            Choose your
+            <span
+              css={`
+                display: flex;
+                margin: 0 ${1.5 * GU}px;
+              `}
+            >
+              <KnownAppBadge appName="voting.aragonpm.eth" label="Voting" />
+            </span>
+            settings below.
+          </span>
+        }
       />
 
       <PercentageField