Progress

2020-02-04 10:50:18 -05:00
parent 1cd851e02e
commit df346596cf
25 changed files with 427 additions and 733 deletions
--- a/app/javascript/gabsocial/components/assets/gab_logo/gab_logo.js
+++ b/app/javascript/gabsocial/components/assets/gab_logo/gab_logo.js
@@ -0,0 +1,34 @@
+import './gab_logo.scss'
+
+const GabLogo = ({
+  width = '50px',
+  height = '30px',
+  viewBox = '0 0 50 30'
+}) => (
+  <svg
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+  >
+    <g>
+      <path className={styles.fillColorBrand} d='M13.8,7.6h-2.4v0.7V9l-0.4-0.3C10.2,7.8,9,7.2,7.7,7.2c-0.2,0-0.4,0-0.4,0c-0.1,0-0.3,0-0.5,0
+c-5.6,0.3-8.7,7.2-5.4,12.1c2.3,3.4,7.1,4.1,9.7,1.5l0.3-0.3l0,0.7c0,1-0.1,1.5-0.4,2.2c-1,2.4-4.1,3-6.8,1.3
+c-0.2-0.1-0.4-0.2-0.4-0.2c-0.1,0.1-1.9,3.5-1.9,3.6c0,0.1,0.5,0.4,0.8,0.6c2.2,1.4,5.6,1.7,8.3,0.8c2.7-0.9,4.5-3.2,5-6.4
+c0.2-1.1,0.2-0.8,0.2-8.4l0-7.1H13.8z M9.7,17.6c-2.2,1.2-4.9-0.4-4.9-2.9C4.8,12.6,7,11,9,11.6C11.8,12.4,12.3,16.1,9.7,17.6z'/>
+      <path className={styles.fillColorBrand} d='M45.6,7.7c-2.4-1-5-0.6-6.7,1L38.6,9V4.5V0h-2.4h-2.4v11v11h2.4h2.4v-0.7v-0.7l0.3,0.3
+c2.4,2.4,6.9,1.9,9.3-0.9C51.5,15.9,50.1,9.6,45.6,7.7z M43.7,17.5c-2.1,1.4-5.1-0.2-5.1-2.8c0-2.1,1.9-3.7,3.9-3.3
+C45.4,12.1,46.2,15.8,43.7,17.5z'/>
+      <path className={styles.fillColorBrand} d='M31.5,12.5c-0.7-3.7-3.1-5.5-7.1-5.3c-1.7,0.1-4,0.7-4.8,1.4l-0.1,0.1l0.7,1.7c0.4,0.9,0.7,1.7,0.7,1.7
+c0,0,0.1,0,0.2-0.1c2.7-1.4,5.4-0.9,5.6,1.1l0,0.2l-0.4-0.1c-3-0.8-6.3-0.1-7.7,1.6c-1.8,2.2-0.9,5.8,1.7,7.1
+c2.1,1,4.6,0.6,6.1-0.8l0.2-0.2v0.6v0.6h2.4h2.4v-4C31.7,13.7,31.7,13.3,31.5,12.5z M26.9,16.4c-0.1,0.7-0.5,1.5-1,2
+c-1.2,1.1-3,0.7-3.2-0.7c-0.2-1,0.6-1.7,2-1.8c0.1,0,0.2,0,0.2,0c0,0,0.2,0,0.4,0c0.5,0,1,0.1,1.4,0.2l0.3,0.1L26.9,16.4z'/>
+    </g>
+  </svg>
+)
+
+export default GabLogo
--- a/app/javascript/gabsocial/components/assets/gab_logo/gab_logo.scss
+++ b/app/javascript/gabsocial/components/assets/gab_logo/gab_logo.scss
@@ -0,0 +1,9 @@
+.gab-logo {
+  enable-background: new 0 0 50 30;
+
+  &__path {
+    fill-rule: evenodd;
+    clip-rule: evenodd;
+    fill: $gab-brand-default;
+  }
+}
--- a/app/javascript/gabsocial/components/assets/gab_logo/index.js
+++ b/app/javascript/gabsocial/components/assets/gab_logo/index.js
@@ -0,0 +1 @@
+export { default } from './gab_logo';
--- a/app/javascript/gabsocial/components/assets/tabs_bar_icon/group_icon.js
+++ b/app/javascript/gabsocial/components/assets/tabs_bar_icon/group_icon.js
@@ -0,0 +1,29 @@
+const GroupIcon = ({
+  className = 'header-nav__item__icon',
+  width = '26px',
+  height = '26px',
+  viewBox = '0 0 48 48'
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+  >
+    <g>
+      <path className='header-nav__item__icon__path' d="M 41 25 L 37 25 C 37 26 37 27 37 28 L 37 42 C 37 43 37 43 37 44 L 43 44 C 46 44 48 42 48 40 L 48 32 C 48 28 44 25 41 25 Z M 41 25"/>
+      <path className='header-nav__item__icon__path' d="M 10 28 C 10 27 10 26 10 25 L 6 25 C 3 25 0 28 0 32 L 0 40 C 0 42 1 44 4 44 L 10 44 C 10 43 10 43 10 42 Z M 10 28"/>
+      <path className='header-nav__item__icon__path' d="M 28 22 L 19 22 C 15 22 12 25 12 28 L 12 42 C 12 43 13 44 14 44 L 33 44 C 34 44 35 43 35 42 L 35 28 C 35 25 32 22 28 22 Z M 28 22"/>
+      <circle className='header-nav__item__icon__path' cx="8" cy="15" r="6"/>
+      <circle className='header-nav__item__icon__path' cx="24" cy="11" r="9"/>
+      <circle className='header-nav__item__icon__path' cx="40" cy="15" r="6"/>
+    </g>
+  </svg>
+)
+
+export default GroupIcon
--- a/app/javascript/gabsocial/components/assets/tabs_bar_icon/home_icon.js
+++ b/app/javascript/gabsocial/components/assets/tabs_bar_icon/home_icon.js
@@ -0,0 +1,24 @@
+const HomeIcon = ({
+  className = 'header-nav__item__icon',
+  width = '26px',
+  height = '26px',
+  viewBox = '0 0 48 48'
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+  >
+    <g>
+      <path className='header-nav__item__icon__path' d='M 47.238281 21.695312 L 25.039062 0.417969 C 24.457031 -0.140625 23.542969 -0.140625 22.960938 0.417969 L 0.738281 21.71875 C 0.269531 22.1875 0 22.835938 0 23.5 C 0 24.878906 1.121094 26 2.5 26 L 6 26 L 6 45 C 6 46.65625 7.34375 48 9 48 L 17.5 48 C 18.328125 48 19 47.328125 19 46.5 L 19 33.5 C 19 33.226562 19.222656 33 19.5 33 L 28.5 33 C 28.773438 33 29 33.226562 29 33.5 L 29 46.5 C 29 47.328125 29.671875 48 30.5 48 L 39 48 C 40.65625 48 42 46.65625 42 45 L 42 26 L 45.5 26 C 46.878906 26 48 24.878906 48 23.5 C 48 22.835938 47.730469 22.1875 47.238281 21.695312 Z M 47.238281 21.695312' />
+    </g>
+  </svg>
+)
+
+export default HomeIcon
--- a/app/javascript/gabsocial/components/assets/tabs_bar_icon/index.js
+++ b/app/javascript/gabsocial/components/assets/tabs_bar_icon/index.js
@@ -0,0 +1,11 @@
+import GroupIcon from './group_icon';
+import HomeIcon from './home_icon';
+import NotificationsIcon from './notifications_icon';
+import SearchIcon from './search_icon';
+
+export {
+  GroupIcon,
+  HomeIcon,
+  NotificationsIcon,
+  SearchIcon,
+}
--- a/app/javascript/gabsocial/components/assets/tabs_bar_icon/notifications_icon.js
+++ b/app/javascript/gabsocial/components/assets/tabs_bar_icon/notifications_icon.js
@@ -0,0 +1,26 @@
+const NotificationsIcon = ({
+  className = 'header-nav__item__icon',
+  width = '26px',
+  height = '26px',
+  viewBox = '0 0 48 48'
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+  >
+    <g>
+      <path className='header-nav__item__icon__path header-nav__item__icon__path--fill' d='M 17 40 C 18 46 21 48 24 48 C 26 48 29 46 30 40 Z M 17 40' />
+      <path className='header-nav__item__icon__path header-nav__item__icon__path--fill' d='M 24 4 C 25 4 27 4 29 5 L 29 5 C 29 2 27 0 24 0 L 23 0 C 20 0 18 2 18 5 L 18 5 C 20 4 22 4 24 4 Z M 24 4' />
+      <path className='header-nav__item__icon__path' d='M 41 40 L 6 40 C 5 40 5 40 5 39 C 4 39 5 38 5 38 C 5 38 6 37 8 35 C 9 30 10 25 10 21 C 10 13 16 7 24 7 C 31 7 37 13 37 20 C 37 20 37 20 37 21 C 37 25 38 30 39 35 C 41 37 42 38 42 38 C 42 38 43 39 42 39 C 42 40 42 40 41 40 Z M 42 38 Z M 42 38' />
+    </g>
+  </svg>
+)
+
+export default NotificationsIcon
--- a/app/javascript/gabsocial/components/assets/tabs_bar_icon/search_icon.js
+++ b/app/javascript/gabsocial/components/assets/tabs_bar_icon/search_icon.js
@@ -0,0 +1,24 @@
+const SearchIcon = ({
+  className = 'tabs-bar-icon',
+  width = '16px',
+  height = '16px',
+  viewBox = '0 0 48 48'
+}) => (
+  <svg
+    className={className}
+    version='1.1'
+    xmlns='http://www.w3.org/2000/svg'
+    x='0px'
+    y='0px'
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    xmlSpace='preserve'
+  >
+    <g>
+      <path className='tabs-bar-icon__path' d='M 47.414062 44.585938 L 33.761719 30.9375 C 36.40625 27.671875 38 23.519531 38 19 C 38 8.523438 29.476562 0 19 0 C 8.523438 0 0 8.523438 0 19 C 0 29.476562 8.523438 38 19 38 C 23.519531 38 27.667969 36.40625 30.9375 33.765625 L 44.585938 47.414062 C 44.976562 47.804688 45.488281 48 46 48 C 46.511719 48 47.023438 47.804688 47.414062 47.414062 C 48.195312 46.632812 48.195312 45.367188 47.414062 44.585938 Z M 19 34 C 10.726562 34 4 27.273438 4 19 C 4 10.726562 10.726562 4 19 4 C 27.273438 4 34 10.726562 34 19 C 34 27.273438 27.273438 34 19 34 Z M 19 34'/>
+    </g>
+  </svg>
+)
+
+export default SearchIcon