From 1eddc7b4b996529cd0827fafaba709e3ac0ec5a8 Mon Sep 17 00:00:00 2001 From: Amit S Namboothiry Date: Mon, 25 Nov 2024 20:46:19 +0530 Subject: [PATCH] Visual updates --- package-lock.json | 4 +- package.json | 2 +- public/sitemap.xml | 2 + src/components/GlobalStyles.js | 10 +++ src/components/Themes.js | 6 +- src/containers/ChordControls.css | 9 ++- src/containers/ChordControls.js | 135 +++++++++++++++++++++++-------- src/containers/Content.css | 2 +- src/containers/Content.js | 14 ++-- src/containers/ContentParser.js | 2 +- src/containers/Footer.css | 10 ++- src/containers/Footer.js | 66 +++++++-------- src/containers/Login.css | 2 +- src/containers/Login.js | 4 +- src/containers/Styles.js | 36 ++++++++- src/index.css | 2 +- 16 files changed, 218 insertions(+), 88 deletions(-) diff --git a/package-lock.json b/package-lock.json index 13304cd6..7e9acc44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "naadan-chords", - "version": "0.85.2", + "version": "0.85.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "naadan-chords", - "version": "0.85.2", + "version": "0.85.3", "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.34", "@fortawesome/free-brands-svg-icons": "^5.15.2", diff --git a/package.json b/package.json index 777b0240..940c7330 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "naadan-chords", - "version": "0.85.2", + "version": "0.85.3", "homepage": "https://www.naadanchords.com/", "private": true, "dependencies": { diff --git a/public/sitemap.xml b/public/sitemap.xml index 01fcf390..a6c28d1e 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -1,6 +1,7 @@ https://www.naadanchords.com/ + https://www.naadanchords.com/chuttamalle-devara-part-1 https://www.naadanchords.com/en-jeevan-theri https://www.naadanchords.com/athimanoharam-vaazha https://www.naadanchords.com/poove-poove-devadoothan @@ -304,6 +305,7 @@ https://www.naadanchords.com/album/24 https://www.naadanchords.com/album/96 https://www.naadanchords.com/album/1983 + https://www.naadanchords.com/album/devara-part-1 https://www.naadanchords.com/album/theri https://www.naadanchords.com/album/vaazha https://www.naadanchords.com/album/devadoothan diff --git a/src/components/GlobalStyles.js b/src/components/GlobalStyles.js index b8046332..971ede10 100644 --- a/src/components/GlobalStyles.js +++ b/src/components/GlobalStyles.js @@ -12,6 +12,7 @@ export const GlobalStyles = createGlobalStyle` font-size: 0.95rem; background: ${({ theme }) => theme.body}; border: 1px solid ${({ theme }) => theme.border}; + border-radius: 8px; } /* Needed to have the triangle match the background of the popover */ @@ -63,6 +64,10 @@ export const GlobalStyles = createGlobalStyle` } } + .modal-content { + border-radius: 15px; + } + .modal-content, .dropdown-menu { background: ${({ theme }) => theme.body}; color: ${({ theme }) => theme.text}; @@ -70,6 +75,7 @@ export const GlobalStyles = createGlobalStyle` .dropdown-menu { border: 1px solid ${({ theme }) => theme.border}; + border-radius: 8px; } .App .navbar .navbar-nav .dropdown-item { @@ -158,6 +164,10 @@ export const GlobalStyles = createGlobalStyle` border-top: 1px solid ${({ theme }) => theme.border}; } + .btn { + border-radius: 8px; + } + .border { border: 1px solid ${({ theme }) => theme.border} !important; } diff --git a/src/components/Themes.js b/src/components/Themes.js index 2efa1645..7a703e22 100644 --- a/src/components/Themes.js +++ b/src/components/Themes.js @@ -13,11 +13,11 @@ export const lightTheme = { linkMuted: "#888888", alertLink: "#777777", alertLinkHover: "#555", - secondaryText: "#999999", + secondaryText: "#666666", secondaryHeading: "#777", secondaryAltHeading: "#555", - border: "#DEE2E6", - backgroundLight: "#F8F9FA", + border: "#D0D5D9", + backgroundLight: "#E8EAEC", backgroundHighlight: "#EFEFEF", disabledInput: "#E9ECEF", searchFocus: "#FFF", diff --git a/src/containers/ChordControls.css b/src/containers/ChordControls.css index b29d92ce..ea3dbd6c 100644 --- a/src/containers/ChordControls.css +++ b/src/containers/ChordControls.css @@ -17,7 +17,11 @@ height: 26px; z-index: 2; right: -1rem; - border-radius: 5px 5px 0 0; + border-radius: 8px 8px 0 0; +} + +.ChordControls.minimized .controls-tray { + border-radius: 8px 0 0 0; } .ChordControls .tray-saver button { @@ -36,6 +40,7 @@ height: 55px; margin-left: -1rem; margin-right: -1rem; + border-radius: 8px; } .ChordControls .controls-container-holder { @@ -83,7 +88,7 @@ .ChordControls .tray-control { font-size: 25px; - padding-top: 5px; + padding-top: 3px; } /* Small devices (landscape phones, less than 768px) */ diff --git a/src/containers/ChordControls.js b/src/containers/ChordControls.js index a31f63fd..de756fcc 100644 --- a/src/containers/ChordControls.js +++ b/src/containers/ChordControls.js @@ -1,57 +1,77 @@ -import React, {Component} from "react"; -import {ButtonGroup, Button} from "react-bootstrap"; +import React, { Component } from "react"; +import { ButtonGroup, Button } from "react-bootstrap"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faPlus, faMinus, faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons"; +import { + faPlus, + faMinus, + faCaretDown, + faCaretUp, +} from "@fortawesome/free-solid-svg-icons"; import * as Styles from "./Styles"; import "./ChordControls.css"; export default class ChordControls extends Component { handleTransposeClick = (transposeAmount) => { this.props.transposeChords(transposeAmount); - } + }; handleFontSizeClick = (sizeAmount) => { this.props.changeFontSize(sizeAmount); - } + }; handleScrollAmountClick = (scrollAmount) => { this.props.changeScrollAmount(scrollAmount); - } + }; checkFontSize = (button) => { - if(button === "up") { + if (button === "up") { return this.props.fontSize > 20; - } else if(button === "down") { + } else if (button === "down") { return this.props.fontSize < 12; } - } + }; checkScrollAmount = (button) => { - if(button === "up") { + if (button === "up") { return this.props.scrollAmount > 4; - } else if(button === "down") { + } else if (button === "down") { return this.props.scrollAmount < 1; } - } + }; computeFontAmount = () => { return (this.props.fontSize - 15) / 2; - } + }; toggleTray = () => { - const { isChordControlsTrayMaximized, setIsChordControlsTrayMaximized } = this.props; + const { isChordControlsTrayMaximized, setIsChordControlsTrayMaximized } = + this.props; let newTrayState = !isChordControlsTrayMaximized; setIsChordControlsTrayMaximized(newTrayState); - } + }; render() { - let { transposeAmount, fontSize, scrollAmount, theme, isChordControlsTrayMaximized: isTrayMaximized } = this.props; + let { + transposeAmount, + fontSize, + scrollAmount, + theme, + isChordControlsTrayMaximized: isTrayMaximized, + } = this.props; return ( - -
-
@@ -59,13 +79,26 @@ export default class ChordControls extends Component {
- TRANSPOSE {transposeAmount ? transposeAmount : ''} + Transpose{" "} + + {transposeAmount ? transposeAmount : ""} + - - - @@ -73,13 +106,28 @@ export default class ChordControls extends Component {
- SCROLL {scrollAmount ? scrollAmount : ''} + Scroll{" "} + + {scrollAmount ? scrollAmount : ""} + - - - @@ -87,24 +135,45 @@ export default class ChordControls extends Component {
- FONT {fontSize === 15 ? '' : this.computeFontAmount()} + Text{" "} + + {fontSize === 15 ? "" : this.computeFontAmount()} + - - -
-
); } -} \ No newline at end of file +} diff --git a/src/containers/Content.css b/src/containers/Content.css index 9745c014..a69cf011 100644 --- a/src/containers/Content.css +++ b/src/containers/Content.css @@ -99,6 +99,7 @@ border-radius: 0px; font-weight: bold; color: #ffffff; + border-radius: 15px; } .Content .post h2 { @@ -110,7 +111,6 @@ } .Content .post small { - color: #999999; font-size: 90%; display: inline-block; } diff --git a/src/containers/Content.js b/src/containers/Content.js index 9b1c3a8c..570fbb3d 100644 --- a/src/containers/Content.js +++ b/src/containers/Content.js @@ -180,7 +180,7 @@ export default class Content extends Component { }; renderTitle = (title, isUserPosts, isCategory, posts, authorCreateDate) => { - let displayTitle = title ? title : "LATEST"; + let displayTitle = title ? title : "Latest"; if (isUserPosts) { displayTitle = posts[0].authorName; @@ -250,7 +250,7 @@ export default class Content extends Component { color={theme.backgroundHighlight} highlightColor={theme.body} > - +
@@ -453,8 +453,9 @@ export default class Content extends Component { > RATE THIS POST
{showScaleInfo ? ( - +

{scale ? ( diff --git a/src/containers/Footer.css b/src/containers/Footer.css index 45473e54..adc5d217 100644 --- a/src/containers/Footer.css +++ b/src/containers/Footer.css @@ -1,5 +1,5 @@ .Footer { - padding: 30px 0; + padding: 1.5rem 0 1rem 0; position: relative; z-index: 2; background: #222222; @@ -15,8 +15,13 @@ width: 80px; } +.Footer .meta-col { + line-height: 1.3rem; +} + .Footer small { color: #aaaaaa; + font-size: 0.65rem; } .Footer h6 { @@ -25,11 +30,12 @@ .Footer ul { margin-bottom: 1.5rem; + margin-top: 0.55rem; } .Footer a { color: #dddddd; - font-size: 1rem; + font-size: 0.925rem; } .Footer small a { diff --git a/src/containers/Footer.js b/src/containers/Footer.js index 45c67e5e..560a6c4a 100644 --- a/src/containers/Footer.js +++ b/src/containers/Footer.js @@ -74,7 +74,7 @@ export default class Footer extends Component { - + logo @@ -83,12 +83,12 @@ export default class Footer extends Component { Guitar chords and tabs
- sitemap | v + Sitemap | v {this.packageDetails.version} -

CATEGORIES
+
Categories
  • @@ -111,7 +111,7 @@ export default class Footer extends Component {
-
PAGES
+
Pages
  • @@ -131,38 +131,30 @@ export default class Footer extends Component {
-
MOBILE APPS
+ + +
Social Media
- - -
CONTRIBUTE
- -
SOCIAL MEDIA
- +
Mobile Apps
+ + + +
Contribute
+
    +
  • + + Submit Song + +
  • - YouTube{" "} + Report bug{" "} - SoundCloud{" "} + GitHub{" "} - + Username or Email alternate ? theme.backgroundLight : "none"}; + border-radius: 15px; &:hover { background: ${({ theme }) => theme.backgroundHighlight}; @@ -41,9 +42,24 @@ export const PostItemContainer = styled.div` background: inherit !important; } + a:hover { + text-decoration: none; + } + h5 { margin-bottom: 0.25rem; margin-top: 0; + width: fit-content; + + &:hover { + text-decoration: underline; + } + } + + &.loading { + h5 { + width: auto; + } } small { @@ -112,11 +128,16 @@ export const ContentContainer = styled.div` h6 { color: ${({ theme }) => theme.secondaryHeading}; } + + .post small { + color: ${({ theme }) => theme.secondaryText}; + } `; export const ScaleInfoContainer = styled.div` - border-left: 3px solid ${({ theme }) => theme.border}; + border: 1px solid ${({ theme }) => theme.border}; background: ${({ theme }) => theme.backgroundLight}; + border-radius: 15px; p { font-size: 16px; @@ -130,6 +151,15 @@ export const ChordControlsContainer = styled.div` border-bottom: 0; } + .btn-outline-light { + border: 1px solid ${({ theme }) => theme.border}; + border-radius: 8px; + } + + .btn.disabled { + opacity: 0.4; + } + .controls-tray { background: ${({ theme }) => theme.backgroundLight}; border: 1px solid ${({ theme }) => theme.border}; @@ -151,6 +181,10 @@ export const CommentAuthorName = styled.small` } `; +export const SignupCard = styled.div` + border: 1px solid ${({ theme }) => theme.border}; +`; + export const LoginDividerText = styled.span` position: absolute; left: 50%; diff --git a/src/index.css b/src/index.css index 5555dbaa..9b6a35c5 100644 --- a/src/index.css +++ b/src/index.css @@ -54,7 +54,7 @@ textarea.form-control, input.form-control { font-size: 14px; padding-top: 0.5rem; - border-radius: 5px; + border-radius: 8px; height: calc(2.5rem + 2px); }