From c00c202d3958b91bf47794bb2e5fd24fafe58f56 Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Mon, 27 Jan 2020 17:20:07 -0500 Subject: [PATCH] Updating background images to be svgs --- .../gabsocial/components/button/button.scss | 5 +- .../assets/compose_icon.js | 25 +++++ .../floating_action_button.js | 14 +-- .../floating_action_button.scss | 17 ++- .../components/image_loader/image_loader.scss | 2 +- .../tabs_bar/assets/gab_logo/gab_logo.js | 36 ++++++ .../tabs_bar/assets/gab_logo/gab_logo.scss | 9 ++ .../tabs_bar/assets/gab_logo/index.js | 1 + .../assets/tabs_bar_icon/group_icon.js | 24 ++++ .../assets/tabs_bar_icon/home_icon.js | 24 ++++ .../tabs_bar/assets/tabs_bar_icon/index.js | 11 ++ .../tabs_bar_icon/notifications_icon.js | 26 +++++ .../assets/tabs_bar_icon/search_icon.js | 24 ++++ .../gabsocial/components/tabs_bar/tabs_bar.js | 17 ++- .../components/tabs_bar/tabs_bar.scss | 106 +++++------------- .../compose/components/upload/upload.scss | 2 +- app/javascript/images/gab_logo.svg | 21 ---- .../images/sprite-main-navigation-links.png | Bin 21981 -> 0 bytes .../images/sprite-main-navigation.png | Bin 22916 -> 0 bytes app/javascript/images/void.png | Bin 174 -> 0 bytes 20 files changed, 246 insertions(+), 118 deletions(-) create mode 100644 app/javascript/gabsocial/components/floating_action_button/assets/compose_icon.js create mode 100644 app/javascript/gabsocial/components/tabs_bar/assets/gab_logo/gab_logo.js create mode 100644 app/javascript/gabsocial/components/tabs_bar/assets/gab_logo/gab_logo.scss create mode 100644 app/javascript/gabsocial/components/tabs_bar/assets/gab_logo/index.js create mode 100644 app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/group_icon.js create mode 100644 app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/home_icon.js create mode 100644 app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/index.js create mode 100644 app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/notifications_icon.js create mode 100644 app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/search_icon.js delete mode 100644 app/javascript/images/gab_logo.svg delete mode 100644 app/javascript/images/sprite-main-navigation-links.png delete mode 100644 app/javascript/images/sprite-main-navigation.png delete mode 100644 app/javascript/images/void.png diff --git a/app/javascript/gabsocial/components/button/button.scss b/app/javascript/gabsocial/components/button/button.scss index 75baf4ef..102bcfc0 100644 --- a/app/javascript/gabsocial/components/button/button.scss +++ b/app/javascript/gabsocial/components/button/button.scss @@ -1,7 +1,6 @@ .button { display: inline-block; font-family: inherit; - padding: 0 16px; position: relative; text-decoration: none; background-color: $ui-highlight-color; @@ -10,9 +9,9 @@ cursor: pointer; @include border-design(transparent, 10px, 4px); - @include text-sizing(14px, 500, 36px, center); + @include text-sizing(14px, 600, 1em, center); @include size(auto, 36px); - @include text-overflow(nowrap); + // @include text-overflow(nowrap); &:active, &:focus, diff --git a/app/javascript/gabsocial/components/floating_action_button/assets/compose_icon.js b/app/javascript/gabsocial/components/floating_action_button/assets/compose_icon.js new file mode 100644 index 00000000..c9cb3098 --- /dev/null +++ b/app/javascript/gabsocial/components/floating_action_button/assets/compose_icon.js @@ -0,0 +1,25 @@ +const ComposeIcon = ({ + className = 'compose-icon', + width = '26px', + height = '26px', + viewBox = '0 0 50 50' +}) => ( + + + + + + + + + +) + +export default ComposeIcon \ No newline at end of file diff --git a/app/javascript/gabsocial/components/floating_action_button/floating_action_button.js b/app/javascript/gabsocial/components/floating_action_button/floating_action_button.js index 286c9a56..b634748c 100644 --- a/app/javascript/gabsocial/components/floating_action_button/floating_action_button.js +++ b/app/javascript/gabsocial/components/floating_action_button/floating_action_button.js @@ -1,3 +1,5 @@ +import ComposeIcon from './assets/compose_icon'; + import './floating_action_button.scss'; export default class FloatingActionButton extends Component { @@ -6,19 +8,17 @@ export default class FloatingActionButton extends Component { message: PropTypes.string.isRequired, }; - shouldComponentUpdate(nextProps, nextState) { - if (nextProps.message !== this.props.message) { - return true; - } - - return false; + shouldComponentUpdate(nextProps) { + return nextProps.message !== this.props.message; } render() { const { onClick, message } = this.props; return ( - ) } } \ No newline at end of file diff --git a/app/javascript/gabsocial/components/floating_action_button/floating_action_button.scss b/app/javascript/gabsocial/components/floating_action_button/floating_action_button.scss index 9f126fe4..94e114c8 100644 --- a/app/javascript/gabsocial/components/floating_action_button/floating_action_button.scss +++ b/app/javascript/gabsocial/components/floating_action_button/floating_action_button.scss @@ -3,19 +3,26 @@ position: fixed; z-index: 1000; border: none; - background-color: transparent; + background-color: $gab-brand-default; + padding-top: 6px; + padding-left: 10px; - @include size(61px, 52px); + @include circle(56px); @include abs-position(auto, 14px, 14px, auto, false); - @include background-image('/assets/images/sprite-main-navigation.png', 161px 152px, -100px 0); @media screen and (max-width: $nav-breakpoint-3) { - display: flex; + display: block !important; } &:hover, &:focus, &:active { - background-position: -100px -100px; + background-color: lighten($gab-brand-default, 5%); + } + + .compose-icon { + &__path { + fill: #fff; + } } } \ No newline at end of file diff --git a/app/javascript/gabsocial/components/image_loader/image_loader.scss b/app/javascript/gabsocial/components/image_loader/image_loader.scss index 8fc84537..98638082 100644 --- a/app/javascript/gabsocial/components/image_loader/image_loader.scss +++ b/app/javascript/gabsocial/components/image_loader/image_loader.scss @@ -8,7 +8,7 @@ object-fit: contain; @include max-size($media-modal-media-max-width, $media-modal-media-max-height); - @include background-image('/assets/images/void.png', contain, center, repeat); + @include background-image("", contain, center, repeat); } &--amorphous & { diff --git a/app/javascript/gabsocial/components/tabs_bar/assets/gab_logo/gab_logo.js b/app/javascript/gabsocial/components/tabs_bar/assets/gab_logo/gab_logo.js new file mode 100644 index 00000000..a942b869 --- /dev/null +++ b/app/javascript/gabsocial/components/tabs_bar/assets/gab_logo/gab_logo.js @@ -0,0 +1,36 @@ +import './gab_logo.scss' + +const GabLogo = ({ + className = 'gab-logo', + width = '50px', + height = '30px', + viewBox = '0 0 50 30' +}) => ( + + + + + + + +) + +export default GabLogo \ No newline at end of file diff --git a/app/javascript/gabsocial/components/tabs_bar/assets/gab_logo/gab_logo.scss b/app/javascript/gabsocial/components/tabs_bar/assets/gab_logo/gab_logo.scss new file mode 100644 index 00000000..0874d5f1 --- /dev/null +++ b/app/javascript/gabsocial/components/tabs_bar/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; + } +} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/tabs_bar/assets/gab_logo/index.js b/app/javascript/gabsocial/components/tabs_bar/assets/gab_logo/index.js new file mode 100644 index 00000000..e68f094a --- /dev/null +++ b/app/javascript/gabsocial/components/tabs_bar/assets/gab_logo/index.js @@ -0,0 +1 @@ +export { default } from './gab_logo'; \ No newline at end of file diff --git a/app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/group_icon.js b/app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/group_icon.js new file mode 100644 index 00000000..d671049b --- /dev/null +++ b/app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/group_icon.js @@ -0,0 +1,24 @@ +const GroupIcon = ({ + className = 'tabs-bar-icon', + width = '18px', + height = '18px', + viewBox = '0 0 48 48' +}) => ( + + + + + +) + +export default GroupIcon \ No newline at end of file diff --git a/app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/home_icon.js b/app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/home_icon.js new file mode 100644 index 00000000..f0b49d7c --- /dev/null +++ b/app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/home_icon.js @@ -0,0 +1,24 @@ +const HomeIcon = ({ + className = 'tabs-bar-icon', + width = '16px', + height = '16px', + viewBox = '0 0 48 48' +}) => ( + + + + + +) + +export default HomeIcon \ No newline at end of file diff --git a/app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/index.js b/app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/index.js new file mode 100644 index 00000000..b86af141 --- /dev/null +++ b/app/javascript/gabsocial/components/tabs_bar/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, +} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/notifications_icon.js b/app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/notifications_icon.js new file mode 100644 index 00000000..f0d37034 --- /dev/null +++ b/app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/notifications_icon.js @@ -0,0 +1,26 @@ +const NotificationsIcon = ({ + className = 'tabs-bar-icon', + width = '16px', + height = '16px', + viewBox = '0 0 48 48' +}) => ( + + + + + + + +) + +export default NotificationsIcon \ No newline at end of file diff --git a/app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/search_icon.js b/app/javascript/gabsocial/components/tabs_bar/assets/tabs_bar_icon/search_icon.js new file mode 100644 index 00000000..6b49234e --- /dev/null +++ b/app/javascript/gabsocial/components/tabs_bar/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' +}) => ( + + + + + +) + +export default SearchIcon \ No newline at end of file diff --git a/app/javascript/gabsocial/components/tabs_bar/tabs_bar.js b/app/javascript/gabsocial/components/tabs_bar/tabs_bar.js index 1832f326..f4f5ec94 100644 --- a/app/javascript/gabsocial/components/tabs_bar/tabs_bar.js +++ b/app/javascript/gabsocial/components/tabs_bar/tabs_bar.js @@ -8,6 +8,13 @@ import SearchContainer from 'gabsocial/features/compose/containers/search_contai import Avatar from '../avatar'; import ActionBar from 'gabsocial/features/compose/components/action_bar'; import { openModal } from '../../actions/modal'; +import GabLogo from './assets/gab_logo/gab_logo'; +import { + GroupIcon, + HomeIcon, + NotificationsIcon, + SearchIcon, +} from './assets/tabs_bar_icon'; import './tabs_bar.scss'; @@ -41,8 +48,9 @@ class TabsBar extends ImmutablePureComponent {