@hellobetterdigitalnz/selwynui 0.0.1-62 → 0.0.1-63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hellobetterdigitalnz/selwynui",
3
- "version": "0.0.1-62",
3
+ "version": "0.0.1-63",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.es.js",
@@ -4,12 +4,6 @@ const BrandBuilderToolTemplateItem = ({icon, iconName, active} : BrandBuilderToo
4
4
  return <div className={styles.item}>
5
5
  <div className={`${styles.itemWrapper} ${active && styles.active}`} aria-description={iconName}>
6
6
  {icon}
7
- <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
8
- <path d="M0 58.01C32.1003 58.01 58.1332 32.0323 58.1332 0H0V58.01Z" fill="#F36C21"/>
9
- <path d="M0 61.24C32.1003 61.24 58.1332 87.2177 58.1332 119.25H0V61.24Z" fill="#F36C21"/>
10
- <path d="M119.794 58.01C87.6937 58.01 61.6608 32.0323 61.6608 0H119.794V58.01Z" fill="#F36C21"/>
11
- <path d="M119.794 61.24C87.6937 61.24 61.6608 87.2177 61.6608 119.25H119.794V61.24Z" fill="#F36C21"/>
12
- </svg>
13
7
  </div>
14
8
  </div>
15
9
  }
@@ -5,17 +5,20 @@ const BrandBuilderToolTemplateSelector = (props : BrandBuilderToolTemplateSelect
5
5
  const {actions, children} = props
6
6
 
7
7
  return <div className={styles.templateSelector}>
8
- <div className={styles.selectors}>
9
- <div className={`${styles.title} ${styles.selectorTitle}`}>
10
- <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
11
- <rect width="50" height="50" rx="25" fill="currentColor"/>
12
- <path d="M34.7346 19.892C34.7346 24.464 31.4946 26.624 26.9586 28.928C23.7186 30.584 22.0986 31.772 21.9546 33.176H34.7706V38H15.0426V35.804C15.0426 30.404 19.4706 27.38 23.2866 25.148C26.9586 23.024 28.8666 21.944 28.8666 19.784C28.8666 17.84 27.6786 16.58 25.3386 16.58C22.8906 16.58 21.4506 18.452 21.3066 20.792H15.2946C15.6906 15.788 19.2186 11.864 25.3746 11.864C30.9546 11.864 34.7346 15.14 34.7346 19.892Z" fill="#EFEAE7"/>
13
- </svg>
14
- <h5>Select a template</h5>
15
- </div>
16
- <div>
17
- {actions}
8
+ <div className={styles.selectorsWrapper}>
9
+ <div className={styles.selectors}>
10
+ <div className={`${styles.title} ${styles.selectorTitle}`}>
11
+ <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" fill="none">
12
+ <rect width="50" height="50" rx="25" fill="currentColor"/>
13
+ <path d="M34.7346 19.892C34.7346 24.464 31.4946 26.624 26.9586 28.928C23.7186 30.584 22.0986 31.772 21.9546 33.176H34.7706V38H15.0426V35.804C15.0426 30.404 19.4706 27.38 23.2866 25.148C26.9586 23.024 28.8666 21.944 28.8666 19.784C28.8666 17.84 27.6786 16.58 25.3386 16.58C22.8906 16.58 21.4506 18.452 21.3066 20.792H15.2946C15.6906 15.788 19.2186 11.864 25.3746 11.864C30.9546 11.864 34.7346 15.14 34.7346 19.892Z" fill="#EFEAE7"/>
14
+ </svg>
15
+ <h5>Select a template</h5>
16
+ </div>
17
+ <div>
18
+ {actions}
19
+ </div>
18
20
  </div>
21
+ <p>Choose the image template that most closely aligns with your intended usage.</p>
19
22
  </div>
20
23
  <div className={styles.items}>
21
24
  {children}
@@ -46,6 +46,10 @@
46
46
  margin-bottom: 0;
47
47
  }
48
48
 
49
+ .selectorsWrapper{
50
+ margin-bottom: 48px;
51
+ }
52
+
49
53
  .selectors{
50
54
  display: flex;
51
55
  align-items: center;