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 {