diff --git a/.gitignore b/.gitignore index f68ecf84..06ec7271 100644 --- a/.gitignore +++ b/.gitignore @@ -17,3 +17,7 @@ public/bundle/Lekton-* public/bundle/style.css uploads + +config/ + +deployment-config.json diff --git a/README.md b/README.md index bc157b1a..8f9d2b86 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,97 @@ # Spee.ch -Spee.ch is a web app that reads and publishes images and videos to and from the [LBRY](https://lbry.io/) blockchain. You are encouraged to contribute to the shared code base, or fork it and make it your own. +Spee.ch is a web app that reads and publishes images and videos to and from the [LBRY](https://lbry.io/) blockchain. We encourage you to contribute to the shared code base, or fork it and make it your own. You can create your own custom version of spee.ch by installing this code base and then creating your own custom components and styles to override the defaults. (More details/guide on how to do that coming soon.) -## Quickstart +## Technology Overview +Spee.ch is a react web app that depends on MySQL for local content, and on two other lbry technologies: + * [chainquery](https://github.com/lbryio/chainquery) - a normalized database of the blockchain data. We've provided credentials to use a public chainquery service. You can also install it on your own server to avoid being affected by the commons. + * [lbrynet](https://github.com/lbryio/lbry) - a daemon that handles your wallet and transactions. -### Ubuntu -[Ubuntu VPS Setup](./docs/ubuntu16vpspersonal.md) +## Installation -_Note: This is our new setup. For our old setup see the [fullstart guide](./fullstart.md)._ +### Ubuntu Step by Step +[Ubuntu Install Guide](./docs/ubuntuinstall.md) -#### System Dependencies: - * [node](https://nodejs.org) +### Quickstart Overview + +#### Get some information ready: + * mysqlusername + * mysqlpassword + * domainname or 'http://localhost' + * speechport = 3000 + +#### Install and Set Up System Dependencies: + * [NodeJS](https://nodejs.org) * [MySQL](https://dev.mysql.com/doc/refman/8.0/en/installing.html) - * [`lbry`](https://github.com/lbryio/lbry) daemon - * note: retrieve an address from the daemon and send your wallet a few credits (or join us in the [#speech discord channel](https://discord.gg/YjYbwhS) and we will send you a few) + * localhost port 3306 + * mysqlusername or root + * mysqlpassword + * You may need + ``` + mysql> `ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'yourpassword';` + ``` + * [lbrynet](https://github.com/lbryio/lbry) daemon + * run this as a service exposing ports 3333 and 4444 + * _note_: once the daemon is running, issue commands in another terminal session (tmux) to retrieve an address for your wallet to recieve 5+ LBC credits (or join us in the [#speech discord channel](https://discord.gg/YjYbwhS) and we will send you a few) + * `./lbrynet commands` gets a list of commands + * `./lbrynet account_balance` gets your balance (initially 0.0) + * `./lbrynet address_list` gets addresses you can use to recieve LBC * [FFmpeg](https://www.ffmpeg.org/download.html) + * [Spee.ch] (below) + * [pm2] (optional) process manager such as pm2 to run speech server.js + * [http proxy server] caddy, nginx, traefik, etc to forward 443 to speech port 3000 + + +#### Clone this repo + * release version for stable production +``` +$ git clone -b release https://github.com/lbryio/spee.ch.git +``` + * master version for development +``` +$ git clone https://github.com/lbryio/spee.ch.git +``` + * your own fork for customization + +#### Change directory into your project +``` +$ cd spee.ch +``` + +#### Install node dependencies +``` +$ npm install +``` + +#### Create the config files using the built-in CLI +_note: make sure lbrynet is running in the background before proceeding_ + +``` +$ npm run configure +``` + + * _note: At the moment, you will have to copy chainqueryConfig.json from:_ + ``` + ~/spee.ch/docs/setup/conf/speech/chainqueryConfig.json + ``` + + _to:_ + ``` + ~/spee.ch/site/config/chainqueryConfig.json + ``` + + * _note: The domain name in this part must be prefixed with http:// or https://_ + +#### Build & start the app + +_note: make sure lbrynet is running in the background before proceeding_ +``` +$ npm run start +``` + +#### View in browser + * Visit [http://localhost:3000](http://localhost:3000) in your browser #### Customize your app @@ -23,12 +99,11 @@ Check out the [customization guide](https://github.com/lbryio/spee.ch/blob/readm #### (optional) add custom components and update the styles - * Create custom components by creating React components in `src/views/` (further instructions coming soon) - * Update the CSS by changing the files in `public/assets/css/` (further instructions and refactor coming soon) + * Create custom components by creating React components in `site/custom/src/` (further instructions coming soon) + * Update the CSS by changing the files in `site/custom/scss` (further instructions and refactor coming soon) -#### (optional) Syncing the full blockchain - * Start the `spee.ch-sync` tool available at [billbitt/spee.ch-sync](https://github.com/billbitt/spee.ch-sync) - * This is not necessary, but highly recommended. It will decode the blocks of the `LBRY` blockchain and add the claims information to your database's tables +#### (optional) install your own chainquery +Instructions are coming at [lbry-docker] to install your own chainquery instance using docker-compose. This will require 50GB of preferably SSD space and at least 10 minutes to download, possibly much longer. ## API #### /api/claim/publish @@ -112,7 +187,7 @@ Spee.ch also runs a sync tool, which decodes blocks from the `LBRY` blockchain a ### Architecture -* `cli/` contains the code for the CLI tool. Running the tool will create `.json` config files and place them in the `config/` folder +* `cli/` contains the code for the CLI tool. Running the tool will create `.json` config files and place them in the `site/config/` folder * `configure.js` is the entry point for the CLI tool * `cli/defaults/` holds default config files * `cli/questions/` holds the questions that the CLI tool asks to build the config files @@ -128,9 +203,9 @@ Spee.ch also runs a sync tool, which decodes blocks from the `LBRY` blockchain a * `client/scss/` contains the CSS for the project * -* `config/custom` is a folder which can be used to override the default components in `client/` +* `site/custom` is a folder which can be used to override the default components in `client/` * The folder structure mimics that of the `client/` folder - * to customize spee.ch, place your own components and scss in the `config/custom/src/` and `config/custom/scss` folders. + * to customize spee.ch, place your own components and scss in the `site/custom/src/` and `site/custom/scss` folders. * `server/` contains all of the server code * `index.js` is the entry point for the server. It creates the [express app](https://expressjs.com/), requires the routes, syncs the database, and starts the server listening on the `PORT` designated in the config files. diff --git a/cli/configure.js b/cli/configure.js index c2b2aa2e..8db0faac 100644 --- a/cli/configure.js +++ b/cli/configure.js @@ -67,6 +67,13 @@ try { slackConfig = require('./defaults/slackConfig.json'); } +let chainqueryConfig; +try { + chainqueryConfig = require('../site/config/chainqueryConfig.json'); +} catch (error) { + chainqueryConfig = require('./defaults/chainqueryConfig.json'); +} + // ask user questions and create config files inquirer .prompt(mysqlQuestions(mysqlDatabase, mysqlUsername, mysqlPassword)) @@ -196,6 +203,7 @@ inquirer createConfigFile('lbryConfig.json', lbryConfig); createConfigFile('loggerConfig.json', loggerConfig); createConfigFile('slackConfig.json', slackConfig); + createConfigFile('chainqueryConfig.json', chainqueryConfig); }) .then(() => { console.log('\nYou\'re all done!'); diff --git a/cli/defaults/chainqueryConfig.json b/cli/defaults/chainqueryConfig.json index 94c1898a..2ef4c607 100644 --- a/cli/defaults/chainqueryConfig.json +++ b/cli/defaults/chainqueryConfig.json @@ -1,8 +1,8 @@ { - "host": "localhost", + "host": "public.chainquery.lbry.io", "port": "3306", "timeout": 30, "database": "chainquery", - "username": "lbry", - "password": "root" + "username": "speechpublic", + "password": "7uITJLwZRvHBZYS3JZDykD1-7hLVkVA1jDWfcgqi6QnC" } diff --git a/client/scss/_asset-display.scss b/client/scss/_asset-display.scss new file mode 100644 index 00000000..55983340 --- /dev/null +++ b/client/scss/_asset-display.scss @@ -0,0 +1,129 @@ +.asset-main { + height: 75vh; + display: flex; + flex-direction: column; + align-items: center; +} + +.asset-display { + display: flex; + min-height: 50vh +} + +.asset-title { + padding-bottom: $thin-padding; + text-align: center; + + @media (min-width: $break-point-mobile) { + padding-top: $secondary-padding; + } +} + +.asset-image, .asset-video { + max-height: 100%; + max-width: 100%; + margin-left: auto; + margin-right: auto; + object-fit: contain; + object-position: center; +} + +/*below must die if this is intended to be shareable component! it also probably doesn't need to be*/ + +.visible-content { + margin: 0; + padding-bottom: 30px; + position: relative; + width: 100%; + + &.closed { + box-shadow: none; + + &:after { + box-shadow: none; + } + } + + &:after { + box-shadow: 0px 2px 3px 2px $shadow-color; + content: ''; + height: 0; + position: absolute; + top: 100%; + width: 100%; + z-index: 100; + } +} + + +.vertical-split, .visible-content { + flex : 1 0 auto; + display : flex; + flex-direction : column; + justify-content: space-between; + align-items : center; +}; + +.collapse-content { + flex-grow: 0; + @media (max-width: $break-point-tablet) { + max-width: 100%; + width: 100%; + } +} + +.collapse-content.closed{ + display: none; +} + +.collapse-button { + background: none; + border: none; + display: block; + margin: 15px auto 0; + width: 25px; + height: 25px; + text-align: center; + padding: 0px; + + @media (max-width: $break-point-tablet) { + padding: 0; + } + + svg { + stroke: $primary-color; + &.plus-icon { + transform: rotate(0); + transition: all 0.4s ease; + } + + } + + &:hover { + .plus-icon { + transform: rotate(-180deg); + } + } +} + +.asset-info { + $asset-info-width: 1000px; + max-width: $asset-info-width; + margin: $primary-padding; + max-width: 100%; + + @media (max-width: $break-point-tablet) { + margin: $primary-padding $secondary-padding; + } + + @media (max-width: $break-point-mobile) { + margin: $primary-padding 0; + } +} + +.asset-footer { + border-top: 1px solid $grey-border; + padding-top: $primary-padding; + margin-top: $primary-padding; + color: $grey; +} diff --git a/client/scss/asset-preview/_asset-preview.scss b/client/scss/_asset-preview.scss similarity index 100% rename from client/scss/asset-preview/_asset-preview.scss rename to client/scss/_asset-preview.scss diff --git a/client/scss/body/_body.scss b/client/scss/_body.scss similarity index 88% rename from client/scss/body/_body.scss rename to client/scss/_body.scss index 90f22258..0c1b55b5 100644 --- a/client/scss/body/_body.scss +++ b/client/scss/_body.scss @@ -1,10 +1,10 @@ body { margin: 0; padding: 0; - height: 100%; + min-height: 100%; word-wrap: break-word; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -} +} \ No newline at end of file diff --git a/client/scss/_button-primary.scss b/client/scss/_button-primary.scss new file mode 100644 index 00000000..37c0a6e4 --- /dev/null +++ b/client/scss/_button-primary.scss @@ -0,0 +1,16 @@ +.button--primary, .button--primary:focus, .button--primary:active { + border-color: $primary-color; + color: $primary-color; + background-color: $background-color; +} + +.button--primary:hover { + color: $background-color; + background-color: $primary-color; +} + +.button--primary:active { + $color: darken($primary-color, 10%); + border-color: $color; + background-color: $color; +} \ No newline at end of file diff --git a/client/scss/_button-secondary.scss b/client/scss/_button-secondary.scss new file mode 100644 index 00000000..c43dfda6 --- /dev/null +++ b/client/scss/_button-secondary.scss @@ -0,0 +1,11 @@ +.button--secondary, .button--secondary:focus, .button--secondary:active { + border-bottom-color: $secondary-color; + color: $secondary-color; + background-color: $background-color; +} + +.button--secondary:active { + $color: darken($secondary-color, 10%); + color: $color; + border-bottom-color: $color; +} diff --git a/client/scss/_button.scss b/client/scss/_button.scss new file mode 100644 index 00000000..7c7ba925 --- /dev/null +++ b/client/scss/_button.scss @@ -0,0 +1,21 @@ +button { + cursor: pointer; + &:active + { + outline: 0; + } +} + +.button--primary, .button--secondary +{ + border-width: $button-border-width; + border-style: $button-border-strength; + border-color: transparent; + padding: $thin-padding; +} + + +.button--jumbo, .button--jumbo:focus, .button--jumbo:active { + width: $button-full-width; + font-size: x-large; +} diff --git a/client/scss/channel-claims-display/_channel-claims-display.scss b/client/scss/_channel-claims-display.scss similarity index 100% rename from client/scss/channel-claims-display/_channel-claims-display.scss rename to client/scss/_channel-claims-display.scss diff --git a/client/scss/_click-to-copy.scss b/client/scss/_click-to-copy.scss new file mode 100644 index 00000000..e279677a --- /dev/null +++ b/client/scss/_click-to-copy.scss @@ -0,0 +1,33 @@ +.click-to-copy-wrap { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + cursor: pointer; + border: 1px solid $grey-border; + border-radius: 6px; + .click-to-copy { + border: none; + padding: 0.36em 0.5em; + margin: 0; + background-color: transparent; + width: calc(100% - 1em - 2px); + font-size: 14px; + letter-spacing: -0.6px; + line-height: 20px; + letter-spacing: 0; + font-family: monospace; + border-right: 1px solid $grey-border; + } + .icon-wrap { + width: 30px; + height: 30px; + line-height: 34px; + text-align: center; + svg { + stroke: $primary-color; + width: 16px; + height: 16px; + } + } +} diff --git a/client/scss/dropzone/_dropzone.scss b/client/scss/_dropzone.scss similarity index 86% rename from client/scss/dropzone/_dropzone.scss rename to client/scss/_dropzone.scss index e5fb9cad..09b8b1bc 100644 --- a/client/scss/dropzone/_dropzone.scss +++ b/client/scss/_dropzone.scss @@ -16,6 +16,7 @@ flex-direction: column; justify-content: center; align-items: center; + user-select: none; } .dropzone:hover, .dropzone--active { @@ -28,6 +29,11 @@ text-align: center; } +.dropzone-dropit-display +{ + color: $primary-color; +} + .dropzone-preview-wrapper { position: relative; width: 100%; @@ -49,3 +55,7 @@ padding: 1em; width: calc(100% - 2em); } + +.dropzone-instructions-display__chooser-label { + text-decoration: underline; +} diff --git a/client/scss/form-feedback/_form-feedback.scss b/client/scss/_form-feedback.scss similarity index 100% rename from client/scss/form-feedback/_form-feedback.scss rename to client/scss/_form-feedback.scss diff --git a/client/scss/_form.scss b/client/scss/_form.scss new file mode 100644 index 00000000..16603923 --- /dev/null +++ b/client/scss/_form.scss @@ -0,0 +1,7 @@ +.form-group { + padding-bottom: $secondary-padding; +} + +.form-title { + padding-bottom: $secondary-padding; +} diff --git a/client/scss/_horizontal-split.scss b/client/scss/_horizontal-split.scss new file mode 100644 index 00000000..0cf4fc87 --- /dev/null +++ b/client/scss/_horizontal-split.scss @@ -0,0 +1,62 @@ +.horizontal-split { + max-width: $width-content-constrained; + width: 100%; + margin-left: auto; + margin-right: auto; + display : flex; + flex-direction : row; + justify-content: space-between; + + &.horizontal-split--mobile-collapse { + @media (max-width: $break-point-mobile) { + flex-direction: column; + + .horizontal-split__column { + width: 100%; + } + + .horizontal-split__column--right { + padding-left: 0; + padding-top: $secondary-padding; + } + } + } +}; + +.horizontal-split__column { + width: 50%; + flex: 1 0 auto; + box-sizing: border-box; +} + +.horizontal-split__column--left { + padding-right: $primary-padding; + + @media (max-width: $break-point-mobile) { + padding-right: $thin-padding; + } +} + +.horizontal-split__column--right { + padding-left: $primary-padding; + + @media (max-width: $break-point-mobile) { + padding-left: $thin-padding; + } +} + +@media (max-width: $break-point-tablet) { + + .horizontal-split__column { + display : flex; + flex-direction : column; + justify-content: space-between; + }; + + .column { + width: 100%; + padding-left: 0; + padding-right: 0; + padding-bottom: $secondary-padding; + } +} diff --git a/client/scss/html/_html.scss b/client/scss/_html.scss similarity index 100% rename from client/scss/html/_html.scss rename to client/scss/_html.scss diff --git a/client/scss/input/_input.scss b/client/scss/_input.scss similarity index 92% rename from client/scss/input/_input.scss rename to client/scss/_input.scss index be4bfb3c..8cfedf4b 100644 --- a/client/scss/input/_input.scss +++ b/client/scss/_input.scss @@ -4,17 +4,12 @@ input:-webkit-autofill { input { margin: 0; - outline: none; padding: $input-padding; border: 0; background-color: $background-color; display: inline-block; } -.input-text { - -} - .input-slider { width: 100% } @@ -43,6 +38,10 @@ input { border-bottom: 1px solid $secondary-color; } +.form-group { + padding-bottom: $secondary-padding; +} + // modifiers .input--full-width { diff --git a/client/scss/label/_label.scss b/client/scss/_label.scss similarity index 83% rename from client/scss/label/_label.scss rename to client/scss/_label.scss index a801c8b6..2e92784a 100644 --- a/client/scss/label/_label.scss +++ b/client/scss/_label.scss @@ -2,6 +2,7 @@ padding-top: $thin-padding; padding-bottom: $thin-padding; display: inline-block; + font-size: 12px; } .label-radio { @@ -10,7 +11,7 @@ cursor: pointer; } -@media (max-width: $break-point-medium ) { +@media (max-width: $break-point-tablet ) { // note: bolding break point lines up with row-label break point .label, .label-radio { diff --git a/client/scss/_link.scss b/client/scss/_link.scss new file mode 100644 index 00000000..bda60bc7 --- /dev/null +++ b/client/scss/_link.scss @@ -0,0 +1,21 @@ +a, a:visited { + text-decoration: none; +} + +.link--primary, .link--primary:visited { + color: $primary-color; + &:hover { text-decoration: underline; } +} + +.link--nav { + color: $text-color; + border-bottom: 2px solid white; + &:hover { + color: $primary-color; + } +} + + +.link--nav-active { + border-bottom: 2px solid $primary-color; +} \ No newline at end of file diff --git a/client/scss/_media-queries.scss b/client/scss/_media-queries.scss new file mode 100644 index 00000000..bb9de378 --- /dev/null +++ b/client/scss/_media-queries.scss @@ -0,0 +1,7 @@ +@media (max-width: $break-point-x-large) { + // hide site description in nav bar + .site-description { + display: none; + } + +} \ No newline at end of file diff --git a/client/scss/nav-bar/_nav-bar.scss b/client/scss/_nav-bar.scss similarity index 54% rename from client/scss/nav-bar/_nav-bar.scss rename to client/scss/_nav-bar.scss index 8d5e3f37..038ebf57 100644 --- a/client/scss/nav-bar/_nav-bar.scss +++ b/client/scss/_nav-bar.scss @@ -1,31 +1,37 @@ .nav-bar { - padding-left: $primary-padding; - padding-right: $primary-padding; - border-bottom: 0.5px solid $tertiary-color; - .select--arrow { - padding: 0 1.5em 0 $input-padding; + margin-top: $thin-padding; + margin-left: $primary-padding; + margin-right: $primary-padding; + + @media (max-width: $break-point-mobile) { + margin-left: 15px; + margin-right: 15px; } } .nav-bar-link { padding: calc(1em - 2px); display: inline-block; + font-size: $text-medium; + letter-spacing: 0.4px; + text-transform: uppercase; } .nav-bar-logo { cursor: pointer; } -@media (max-width: $break-point-medium ) { +@media (max-width: $break-point-tablet ) { .nav-bar-link { padding-top: calc(1em - 2px); padding-right: 1em; padding-bottom: calc(1em - 2px); padding-left: 1em; } + } -@media (max-width: $break-point-small ) { +@media (max-width: $break-point-mobile ) { .nav-bar-link { padding-top: calc(0.5em - 2px); padding-right: 0.5em; diff --git a/client/scss/page-content/_page-content.scss b/client/scss/_page-content.scss similarity index 100% rename from client/scss/page-content/_page-content.scss rename to client/scss/_page-content.scss diff --git a/client/scss/page-layout-show-lite/_page-layout-show-lite.scss b/client/scss/_page-layout-show-lite.scss similarity index 100% rename from client/scss/page-layout-show-lite/_page-layout-show-lite.scss rename to client/scss/_page-layout-show-lite.scss diff --git a/client/scss/_page-layout.scss b/client/scss/_page-layout.scss new file mode 100644 index 00000000..e3092a65 --- /dev/null +++ b/client/scss/_page-layout.scss @@ -0,0 +1,27 @@ +.page-layout { + flex: 1 0 auto; + display: flex; + flex-direction: column; + .content { + flex: 1 0 auto; + display: flex; + -webkit-flex-direction: column; + flex-direction: column; + margin: $secondary-padding; + } +} + +@media (max-width: $break-point-tablet) { + .page-layout .content { margin: $tertiary-padding; } +} + +@media (max-width: $break-point-mobile) { + max-width: calc(100% - 30px); +} + +//below should take some styles from _text.scss and probably elsewhere and become "markdown" or "rich" styles +.page-layout { + p { + margin-bottom: $tertiary-padding; + } +} \ No newline at end of file diff --git a/client/scss/_progress-bar.scss b/client/scss/_progress-bar.scss new file mode 100644 index 00000000..6a8979a6 --- /dev/null +++ b/client/scss/_progress-bar.scss @@ -0,0 +1,12 @@ +.progress-bar__wrapper { + display: flex; + align-items: center; + justify-content: center; +} +.progress-bar--inactive { + color: $grey; +} + +.progress-bar--active { + color: $primary-color; +} diff --git a/client/scss/publish-disabled-message/_publish-disabled-message.scss b/client/scss/_publish-disabled-message.scss similarity index 100% rename from client/scss/publish-disabled-message/_publish-disabled-message.scss rename to client/scss/_publish-disabled-message.scss diff --git a/client/scss/_publish-preview.scss b/client/scss/_publish-preview.scss new file mode 100644 index 00000000..e275e9b2 --- /dev/null +++ b/client/scss/_publish-preview.scss @@ -0,0 +1,13 @@ +.publish-form__title { + max-width: $width-content-constrained; + margin-left: auto; + margin-right: auto; + + @media (max-width: $break-point-mobile) { + font-size: .8em; + } +} + +.publish-preview-dim { + opacity: 0.2; +} diff --git a/client/scss/publish-status/_publish-status.scss b/client/scss/_publish-status.scss similarity index 100% rename from client/scss/publish-status/_publish-status.scss rename to client/scss/_publish-status.scss diff --git a/client/scss/publish-url-input/_publish-url-input.scss b/client/scss/_publish-url-input.scss similarity index 91% rename from client/scss/publish-url-input/_publish-url-input.scss rename to client/scss/_publish-url-input.scss index 70436e4e..41673a1e 100644 --- a/client/scss/publish-url-input/_publish-url-input.scss +++ b/client/scss/_publish-url-input.scss @@ -17,5 +17,5 @@ .publish-url-text { margin: 0; padding: 0; - color: $secondary-color; + color: $help-color; } diff --git a/client/scss/react-app/_react-app.scss b/client/scss/_react-app.scss similarity index 100% rename from client/scss/react-app/_react-app.scss rename to client/scss/_react-app.scss diff --git a/client/scss/_reset.scss b/client/scss/_reset.scss new file mode 100644 index 00000000..85cb60d3 --- /dev/null +++ b/client/scss/_reset.scss @@ -0,0 +1,4 @@ +button, input, textarea, label, select, option { + font-family: inherit; + font-size: inherit; +} \ No newline at end of file diff --git a/client/scss/row/_row.scss b/client/scss/_row.scss similarity index 69% rename from client/scss/row/_row.scss rename to client/scss/_row.scss index 3b731ac0..4fbdf10c 100644 --- a/client/scss/row/_row.scss +++ b/client/scss/_row.scss @@ -1,5 +1,5 @@ .row { - padding-bottom: 2em; + margin-bottom: 1.2em; } .row-labeled { @@ -7,29 +7,28 @@ flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; + padding-bottom: $tertiary-padding; } .row-labeled-label { - align-self: flex-start; width: 30%; + display: flex; + align-items: center; + flex: 1; } .row-labeled-content { align-self: center; width: 70%; } - -@media (max-width: $break-point-medium ) { - +@media (max-width: $break-point-tablet ) { .row-labeled { flex-direction: column; } - .row-labeled-label { width: 100%; } .row-labeled-content { width: 100%; } - } diff --git a/client/scss/_select.scss b/client/scss/_select.scss new file mode 100644 index 00000000..e9642528 --- /dev/null +++ b/client/scss/_select.scss @@ -0,0 +1,4 @@ +select { + margin: 0; + display: inline-block; +} diff --git a/client/scss/_share-buttons.scss b/client/scss/_share-buttons.scss new file mode 100644 index 00000000..ab4234d0 --- /dev/null +++ b/client/scss/_share-buttons.scss @@ -0,0 +1,51 @@ +.share-buttons { + display: flex; + align-items: center; + + a { + display: block; + width: 30px; + height: 30px; + margin: 0 7px; + border-radius: 100%; + line-height: 30px; + text-align: center; + transition: all 0.2s ease; + &.twitter { + background:#4DC2FE; + img { + margin-top: 8px; + margin-left: 2px; + } + } + + &.facebook { + background: #5487DE; + img { + margin-top: 6px; + } + } + + &.tumblr { + background: #274061; + img { + margin-top: 7px; + } + } + + &.reddit { + background: #FF4500; + img { + margin-top: 7px; + } + } + + &:first-child{ + margin-left: 0px; + } + + &:hover { + background: $primary-color; + } + } +} diff --git a/client/scss/social-share-link/_social-share-link.scss b/client/scss/_social-share-link.scss similarity index 86% rename from client/scss/social-share-link/_social-share-link.scss rename to client/scss/_social-share-link.scss index 58973667..c1fa2946 100644 --- a/client/scss/social-share-link/_social-share-link.scss +++ b/client/scss/_social-share-link.scss @@ -7,5 +7,4 @@ .social-share-link > a{ padding-right:0.5em; padding-left:0.5em; - padding-bottom:0.3em; } \ No newline at end of file diff --git a/client/scss/space-around/_space-around.scss b/client/scss/_space-around.scss similarity index 100% rename from client/scss/space-around/_space-around.scss rename to client/scss/_space-around.scss diff --git a/client/scss/space-between/_space-between.scss b/client/scss/_space-between.scss similarity index 100% rename from client/scss/space-between/_space-between.scss rename to client/scss/_space-between.scss diff --git a/client/scss/_text.scss b/client/scss/_text.scss new file mode 100644 index 00000000..357099f2 --- /dev/null +++ b/client/scss/_text.scss @@ -0,0 +1,59 @@ +// set defaults + +h1, h2, h3, h4, p { + margin: 0; +} + +body { + color: $text-color; + font-family: 'Circular', serif; + font-size: 16px; +} + +h1 { + font-size: $text-xx-large; +} + +h2 { + font-size: $text-x-large; +} + +h3 { + font-size: $text-large; +} + +.text--extra-large { + font-size: $text-xx-large; +} + +.text--large { + font-size: $text-large; +} + +.text--medium { + font-size: $text-medium; +} + +.text--small { + font-size: $text-small; +} + +.text--extra-small { + font-size: $text-x-small; +} + +.text--secondary { + color: $help-color; +} + +.text--interactive { + color: $primary-color; +} + +.text--failure { + color: $failure-color; +} + +.text--success { + color: $success-color; +} diff --git a/client/scss/_textarea.scss b/client/scss/_textarea.scss new file mode 100644 index 00000000..e72bf554 --- /dev/null +++ b/client/scss/_textarea.scss @@ -0,0 +1,6 @@ +textarea { + margin: 0; + padding: $input-padding; + display: inline-block; + width: $input-full-width; +} diff --git a/client/scss/tooltip/_tooltip.scss b/client/scss/_tooltip.scss similarity index 100% rename from client/scss/tooltip/_tooltip.scss rename to client/scss/_tooltip.scss diff --git a/client/scss/variables/_variables.scss b/client/scss/_variables.scss similarity index 57% rename from client/scss/variables/_variables.scss rename to client/scss/_variables.scss index 26f125d8..a9835c98 100644 --- a/client/scss/variables/_variables.scss +++ b/client/scss/_variables.scss @@ -1,10 +1,12 @@ $base-color: white; -$primary-color: black; -$secondary-color: #9b9b9b; -$tertiary-color: #ccccc0; -$interactive-color: blue; +$primary-color: #005da0; +$secondary-color: $primary-color; $success-color: green; $failure-color: red; +$grey: #9095A5; +$help-color: $grey; +$grey-border: #DDDFE4; +$shadow-color: rgba(169, 173, 186, 0.2); $primary-padding: 3em; $secondary-padding: 2em; @@ -12,8 +14,10 @@ $tertiary-padding: 1em; $thin-padding: 0.3em; $full-width-thin-padding: calc(100% - 0.6em); +$width-content-constrained: 1000px; + $background-color: $base-color; -$font-color: $primary-color; +$text-color: #333; $button-border-width: 1px; $button-border-strength: solid; @@ -23,16 +27,14 @@ $input-padding: 0.3em; $input-full-width: calc(100% - 0.6em); $text-xx-large: 2.5em; -$text-x-large: xx-large; -$text-large: x-large; -$text-medium: large; -$text-small: medium; -$text-x-small: small; +$text-x-large: 2.0em; +$text-large: 1.5em; +$text-medium: 1.0em; +$text-small: 0.9em; +$text-x-small: 0.8em; $break-point-xx-large: 1400px; $break-point-x-large: 1290px; $break-point-large: 1000px; -$break-point-medium: 800px; -$break-point-small: 500px; -$break-point-x-small: 400px; - +$break-point-tablet: 800px; +$break-point-mobile: 500px; \ No newline at end of file diff --git a/client/scss/video/_video.scss b/client/scss/_video.scss similarity index 100% rename from client/scss/video/_video.scss rename to client/scss/_video.scss diff --git a/client/scss/all.scss b/client/scss/all.scss index 2f1447f5..c61e42bd 100644 --- a/client/scss/all.scss +++ b/client/scss/all.scss @@ -1,48 +1,44 @@ -@import '~variables/_variables'; -@import '~reset/_reset'; -@import '~font/_font'; -@import '~html/_html'; -@import '~body/_body'; -@import '~react-app/_react-app'; -@import '~text/_text'; +@import '_variables'; +@import '_reset'; +@import 'font/_font.scss'; +@import '_html'; +@import '_body'; +@import '_react-app'; +@import '_text'; -@import '~link/_link'; -@import '~input/_input'; -@import '~select/_select'; -@import '~textarea/_textarea'; -@import '~video/_video'; +@import '_link'; +@import '_input'; +@import '_select'; +@import '_textarea'; +@import '_video'; +@import '_form'; -@import '~asset-display/_asset-display'; -@import '~asset-preview/_asset-preview'; -@import '~button/_button'; -@import '~button-primary/_button-primary'; -@import '~button-secondary/_button-secondary'; -@import '~button-tertiary/_button-tertiary'; -@import '~click-to-copy/_click-to-copy'; -@import '~column/_column'; -@import '~form-feedback/_form-feedback'; -@import '~horizontal-quad-split/_horizontal-quad-split'; -@import '~horizontal-split/_horizontal-split'; -@import '~label/_label'; -@import '~nav-bar/_nav-bar'; -@import '~page-layout/_page-layout'; -@import '~page-layout-show-lite/_page-layout-show-lite'; -@import '~page-content/_page-content'; -@import '~progress-bar/_progress-bar'; -@import '~publish-preview/_publish-preview'; -@import '~space-between/_space-between'; -@import '~space-around/_space-around'; -@import '~row/_row'; -@import '~vertical-split/_vertical-split'; -@import '~tooltip/_tooltip'; -@import '~social-share-link/_social-share-link'; - -@import '~channel-claims-display/_channel-claims-display'; -@import '~dropzone/_dropzone'; -@import '~publish-url-input/_publish-url-input'; -@import '~publish-status/_publish-status'; -@import '~publish-disabled-message/_publish-disabled-message'; - -@import '~media-queries/_media-queries'; +@import '_asset-display'; +@import '_asset-preview'; +@import '_button'; +@import '_button-primary'; +@import '_button-secondary'; +@import '_click-to-copy'; +@import '_form-feedback'; +@import '_horizontal-split'; +@import '_label'; +@import '_nav-bar'; +@import '_page-layout'; +@import '_page-layout-show-lite'; +@import '_page-content'; +@import '_progress-bar'; +@import '_publish-preview'; +@import '_share-buttons'; +@import '_space-between'; +@import '_space-around'; +@import '_row'; +@import '_tooltip'; +@import '_social-share-link'; +@import '_channel-claims-display'; +@import '_dropzone'; +@import '_publish-url-input'; +@import '_publish-status'; +@import '_publish-disabled-message'; +@import '_media-queries'; diff --git a/client/scss/asset-display/_asset-display.scss b/client/scss/asset-display/_asset-display.scss deleted file mode 100644 index 11d42c4c..00000000 --- a/client/scss/asset-display/_asset-display.scss +++ /dev/null @@ -1,22 +0,0 @@ -.asset-display { - display: flex; - flex: 1 0 auto; - flex-direction: column; - justify-content: center; -} - -.asset-image, .asset-video { - margin : 0; - max-width: 100%; - max-height: 100%; - object-fit: contain; - object-position: center; -} -.asset-video { - border: 1px solid #d0d0d0; - margin: 16px; - padding: 6px; -} -.vertical-split .asset-display { - height: 90vh; -} diff --git a/client/scss/button-primary/_button-primary.scss b/client/scss/button-primary/_button-primary.scss deleted file mode 100644 index ce2ac526..00000000 --- a/client/scss/button-primary/_button-primary.scss +++ /dev/null @@ -1,34 +0,0 @@ -.button-primary, .button-primary:focus, .button-primary:active { - border: $button-border-width $button-border-strength $primary-color; - margin-top: $thin-padding; - margin-bottom: $thin-padding; - padding: $thin-padding; - color: $primary-color; - background-color: $background-color; - outline: 0; -} - -.button-primary:focus { - border-color: $secondary-color; - background-color: $tertiary-color; -} - - -.button-primary:hover { - border-color: $interactive-color; - color: $background-color; - background-color: $interactive-color; -} - -.button-primary:active{ - border-color: $background-color; - color: $secondary-color; - background-color: $tertiary-color; -} - -.button-primary--jumbo, .button-primary--jumbo:focus, .button-primary--jumbo:active { - width: $button-full-width; - padding-top: $secondary-padding; - padding-bottom: $secondary-padding; - font-size: x-large; -} diff --git a/client/scss/button-secondary/_button-secondary.scss b/client/scss/button-secondary/_button-secondary.scss deleted file mode 100644 index 29463cc9..00000000 --- a/client/scss/button-secondary/_button-secondary.scss +++ /dev/null @@ -1,21 +0,0 @@ -.button--secondary, .button--secondary:focus { - border: 0; - border-bottom: $button-border-width $button-border-strength $primary-color; - padding: 0.5em; - color: $primary-color; - background-color: $background-color; - outline: 0; -} - -.button--secondary:focus{ - border-color: $secondary-color; - background-color: $tertiary-color; -} - -.button--secondary:hover { - color: $interactive-color; -} - -.button--secondary:active { - color: $background-color; -} diff --git a/client/scss/button-tertiary/_button-tertiary.scss b/client/scss/button-tertiary/_button-tertiary.scss deleted file mode 100644 index 63bb23c3..00000000 --- a/client/scss/button-tertiary/_button-tertiary.scss +++ /dev/null @@ -1,14 +0,0 @@ -.button--tertiary, .button--tertiary:focus, .button--tertiary:active { - border: 0; - color: $secondary-color; - background-color: $background-color; -} - -.button--tertiary:hover { - color: $primary-color; -} - -.button--tertiary:active, .button--tertiary:focus { - color: $secondary-color; - background-color: $tertiary-color; -} diff --git a/client/scss/button/_button.scss b/client/scss/button/_button.scss deleted file mode 100644 index 6bb49061..00000000 --- a/client/scss/button/_button.scss +++ /dev/null @@ -1,3 +0,0 @@ -button { - cursor: pointer; -} diff --git a/client/scss/click-to-copy/_click-to-copy.scss b/client/scss/click-to-copy/_click-to-copy.scss deleted file mode 100644 index a8dc776f..00000000 --- a/client/scss/click-to-copy/_click-to-copy.scss +++ /dev/null @@ -1,9 +0,0 @@ -.click-to-copy { - cursor: pointer; - border: 1px solid black; - padding: 0.5em; - margin: 0; - color: black; - background-color: white; - width: calc(100% - 1em - 2px); -} diff --git a/client/scss/column/_column.scss b/client/scss/column/_column.scss deleted file mode 100644 index 9aa9b403..00000000 --- a/client/scss/column/_column.scss +++ /dev/null @@ -1,4 +0,0 @@ -.column { - padding-left: $primary-padding; - padding-right: $primary-padding; -} diff --git a/client/scss/font/Circular/CircularStd-Bold.ttf b/client/scss/font/Circular/CircularStd-Bold.ttf new file mode 100644 index 00000000..76eda84c Binary files /dev/null and b/client/scss/font/Circular/CircularStd-Bold.ttf differ diff --git a/client/scss/font/Circular/CircularStd-Book.ttf b/client/scss/font/Circular/CircularStd-Book.ttf new file mode 100644 index 00000000..b0bac769 Binary files /dev/null and b/client/scss/font/Circular/CircularStd-Book.ttf differ diff --git a/client/scss/font/_font.scss b/client/scss/font/_font.scss index a62312a0..279b7de7 100644 --- a/client/scss/font/_font.scss +++ b/client/scss/font/_font.scss @@ -16,3 +16,16 @@ font-weight: normal; font-style: italic; } + + +@font-face { + font-family: 'Circular'; + src: url('./font/Circular/CircularStd-Book.ttf'); + font-weight: normal; +} + +@font-face { + font-family: 'Circular'; + src: url('./font/Circular/CircularStd-Bold.ttf'); + font-weight: bold; +} \ No newline at end of file diff --git a/client/scss/horizontal-quad-split/_horizontal-quad-split.scss b/client/scss/horizontal-quad-split/_horizontal-quad-split.scss deleted file mode 100644 index a13b7941..00000000 --- a/client/scss/horizontal-quad-split/_horizontal-quad-split.scss +++ /dev/null @@ -1,53 +0,0 @@ -.horizontal-quad-split { - display : flex; - flex-direction : row; - justify-content: space-between; - align-items : flex-start; - .left-side, .right-side { - width : 50%; - display : flex; - flex-direction : row; - justify-content: space-between; - align-items : flex-start; - .column-a, .column-b, .column-c, .column-d { - width: 50%; - }; - .column-a, .column-b, .column-c { - padding-right: $secondary-padding; - }; - }; -}; - - - -@media (max-width: $break-point-large ) { - - .horizontal-quad-split { - flex-direction : column; - .left-side, .right-side { - width : 100%; - .column-a, .column-b, .column-c, .column-d { - width: 50%; - }; - .column-b { - padding-right: 0; - } - } - }; - -} - -@media (max-width: $break-point-medium ) { - - .horizontal-quad-split { - flex-direction : column; - .left-side, .right-side { - flex-direction : column; - .column-a, .column-b, .column-c, .column-d { - width: 100%; - padding: 0; - }; - } - }; - -} diff --git a/client/scss/horizontal-split/_horizontal-split.scss b/client/scss/horizontal-split/_horizontal-split.scss deleted file mode 100644 index bd304c3c..00000000 --- a/client/scss/horizontal-split/_horizontal-split.scss +++ /dev/null @@ -1,28 +0,0 @@ -.horizontal-split { - display : flex; - flex-direction : row; - justify-content: space-between; - align-items : flex-start; - .column { - width: 50%; - } -}; - - - -@media (max-width: $break-point-large ) { - - .horizontal-split { - display : flex; - flex-direction : column; - justify-content: space-between; - align-items : flex-start; - .column { - width: 100%; - padding-left: 0; - padding-right: 0; - padding-bottom: $secondary-padding; - } - }; - -} diff --git a/client/scss/icon/chevron-down.svg b/client/scss/icon/chevron-down.svg new file mode 100644 index 00000000..9144704e --- /dev/null +++ b/client/scss/icon/chevron-down.svg @@ -0,0 +1,9 @@ + + + + chevron-down + Created with Sketch. + + + + \ No newline at end of file diff --git a/client/scss/link/_link.scss b/client/scss/link/_link.scss deleted file mode 100644 index 4553605e..00000000 --- a/client/scss/link/_link.scss +++ /dev/null @@ -1,27 +0,0 @@ -a, a:visited { - text-decoration: none; -} - -.link--primary, .link--primary:visited { - color: $interactive-color; -} - -.link--secondary, .link--secondary:visited { - margin: 0px; - padding: 0.3em; - color: $secondary-color; -} - -.link--nav { - color: $primary-color; - border-bottom: 2px solid white; -} - -.link--nav:hover { - color: $interactive-color; -} - -.link--nav-active { - color: $interactive-color; - border-bottom: 2px solid $interactive-color; -} diff --git a/client/scss/media-queries/_media-queries.scss b/client/scss/media-queries/_media-queries.scss deleted file mode 100644 index 638d4b67..00000000 --- a/client/scss/media-queries/_media-queries.scss +++ /dev/null @@ -1,24 +0,0 @@ -@media (max-width: $break-point-x-large) { - // hide site description in nav bar - .site-description { - display: none; - } - -} - -@media (max-width: $break-point-large ) { - -} - -@media (max-width: $break-point-medium) { - - -} - -@media (max-width: $break-point-small) { - -} - -@media (max-width: $break-point-x-small ) { - -} diff --git a/client/scss/page-layout/_page-layout.scss b/client/scss/page-layout/_page-layout.scss deleted file mode 100644 index f94645a5..00000000 --- a/client/scss/page-layout/_page-layout.scss +++ /dev/null @@ -1,12 +0,0 @@ -.page-layout { - flex: 1 0 auto; - display: flex; - flex-direction: column; - .content { - flex: 1 0 auto; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; - margin: $primary-padding; - } -} diff --git a/client/scss/progress-bar/_progress-bar.scss b/client/scss/progress-bar/_progress-bar.scss deleted file mode 100644 index c4ef6c52..00000000 --- a/client/scss/progress-bar/_progress-bar.scss +++ /dev/null @@ -1,7 +0,0 @@ -.progress-bar--inactive { - color: $secondary-color; -} - -.progress-bar--active { - color: $primary-color; -} diff --git a/client/scss/publish-preview/_publish-preview.scss b/client/scss/publish-preview/_publish-preview.scss deleted file mode 100644 index b1938c70..00000000 --- a/client/scss/publish-preview/_publish-preview.scss +++ /dev/null @@ -1,3 +0,0 @@ -.publish-preview-dim { - opacity: 0.2; -} diff --git a/client/scss/reset/_reset.scss b/client/scss/reset/_reset.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/client/scss/select/_select.scss b/client/scss/select/_select.scss deleted file mode 100644 index df03a09e..00000000 --- a/client/scss/select/_select.scss +++ /dev/null @@ -1,17 +0,0 @@ -select { - margin: 0; - outline: none; - padding: $input-padding; - border: 0; - background-color: $background-color; - display: inline-block; -} - -.select--arrow { - -moz-appearance:none; - -webkit-appearance: none; - background: url('./icon/downArrow.svg') no-repeat right; - cursor: pointer; - padding-right: 1.5em; - padding-left: $input-padding -} diff --git a/client/scss/text/_text.scss b/client/scss/text/_text.scss deleted file mode 100644 index cec1c28e..00000000 --- a/client/scss/text/_text.scss +++ /dev/null @@ -1,165 +0,0 @@ -// set defaults - -h1, h2, h3, h4, p { - margin: 0; -} - -h1 { - font-size: $text-xx-large; -} - -h2 { - font-size: $text-x-large; -} - -h3 { - font-size: $text-large; - font-weight: bold; -} - -p, body, button, input, textarea, label, select, option { - font-family: 'Lekton', monospace; - font-size: $text-large; -} - -.text--extra-large { - font-size: $text-xx-large; -} - -.text--large { - font-size: $text-large; -} - -.text--medium { - font-size: $text-medium; -} - -.text--small { - font-size: $text-small; -} - -.text--extra-small { - font-size: $text-x-small; -} - -.text--underline { - text-decoration: underline; -} - -.text--primary { - color: $primary-color; -} - -.text--secondary { - color: $secondary-color; -} - -.text--tertiary { - color: $tertiary-color; -} - -.text--interactive { - color: $interactive-color; -} - -.text--failure { - color: $failure-color; -} - -.text--success { - color: $success-color; -} - -@media (max-width: $break-point-x-large ) { - h1 { - font-size: $text-x-large; - } - - h2 { - font-size: $text-large; - } - - h3 { - font-size: $text-medium; - } - - p, body, button, input, textarea, label, select, option { - font-size: $text-medium; - } - - .text--extra-large { - font-size: $text-x-large; - } - - .text--large { - font-size: $text-medium; - } - - .text--medium { - font-size: $text-small; - } - -} - -@media (max-width: $break-point-medium) { - - h1 { - font-size: $text-large; - } - - h2 { - font-size: $text-medium; - } - - h3 { - font-size: $text-small; - } - - p, body, button, input, textarea, label, select, option { - font-size: $text-small; - } - - .text--extra-large { - font-size: $text-large; - } - - .text--large { - font-size: $text-medium; - } - - .text--small { - font-size: $text-x-small; - } - - -} - -@media (max-width: $break-point-x-small) { - - h1 { - font-size: $text-medium; - font-weight: bold; - } - - h2 { - font-size: $text-small; - } - - p, body, button, input, textarea, label, select, option { - font-size: $text-x-small; - } - - .text--extra-large { - font-size: $text-x-small; - font-weight: bold; - } - - .text--large { - font-size: $text-x-small; - } - - .text--medium { - font-size: $text-x-small; - } - -} diff --git a/client/scss/textarea/_textarea.scss b/client/scss/textarea/_textarea.scss deleted file mode 100644 index 4f07b83e..00000000 --- a/client/scss/textarea/_textarea.scss +++ /dev/null @@ -1,10 +0,0 @@ -textarea { - margin: 0; - outline: none; - padding: $input-padding; - border: 0; - border-bottom: 1px solid $secondary-color; - background-color: $background-color; - display: inline-block; - width: $input-full-width; -} diff --git a/client/scss/vertical-split/_vertical-split.scss b/client/scss/vertical-split/_vertical-split.scss deleted file mode 100644 index ac100b08..00000000 --- a/client/scss/vertical-split/_vertical-split.scss +++ /dev/null @@ -1,7 +0,0 @@ -.vertical-split { - flex : 1 0 auto; - display : flex; - flex-direction : column; - justify-content: space-between; - align-items : center; -}; diff --git a/client/src/components/AboutSpeechDetails/index.jsx b/client/src/components/AboutSpeechDetails/index.jsx index 98962e91..8a1e2532 100644 --- a/client/src/components/AboutSpeechDetails/index.jsx +++ b/client/src/components/AboutSpeechDetails/index.jsx @@ -7,9 +7,9 @@ const AboutSpeechDetails = () => {

- Terms of Service + Terms of Service
- Frequently Asked Questions + Frequently Asked Questions

diff --git a/client/src/components/AboutSpeechOverview/index.jsx b/client/src/components/AboutSpeechOverview/index.jsx index 08190424..ef53812f 100644 --- a/client/src/components/AboutSpeechOverview/index.jsx +++ b/client/src/components/AboutSpeechOverview/index.jsx @@ -8,18 +8,12 @@ const AboutSpeechOverview = () => {

Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.

 -

- TWITTER -

-

- GITHUB -

-

- DISCORD CHANNEL -

-

- DOCUMENTATION -

+
+ TWITTER
+ GITHUB
+ DISCORD CHANNEL
+ DOCUMENTATION
+
); diff --git a/client/src/components/AssetInfoFooter/index.js b/client/src/components/AssetInfoFooter/index.js new file mode 100644 index 00000000..a059f670 --- /dev/null +++ b/client/src/components/AssetInfoFooter/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import Row from '@components/Row'; + +const AssetInfoFooter = ({ assetUrl, name }) => { + return ( +
+

+ Hosted via the LBRY blockchain +

+
+ ); +}; + +export default AssetInfoFooter; diff --git a/client/src/components/AssetShareButtons/index.js b/client/src/components/AssetShareButtons/index.js index 6ac868e5..e733b460 100644 --- a/client/src/components/AssetShareButtons/index.js +++ b/client/src/components/AssetShareButtons/index.js @@ -5,49 +5,53 @@ const AssetShareButtons = ({ assetUrl, name }) => { return ( - twitter + - facebook + - tumblr + - reddit - - - mastodon - - - diaspora + ); }; +// +// Additional icons disabled. If you want to add additional icons, you have to solve +// https://github.com/lbryio/spee.ch/issues/687 +// +// +// mastodon +// +// +// diaspora +// export default AssetShareButtons; diff --git a/client/src/components/ButtonPrimary/index.jsx b/client/src/components/ButtonPrimary/index.jsx index 6b8230d3..30082cd4 100644 --- a/client/src/components/ButtonPrimary/index.jsx +++ b/client/src/components/ButtonPrimary/index.jsx @@ -4,7 +4,7 @@ const ButtonPrimary = ({ value, onClickHandler, type = 'button' }) => { return ( - ); -}; - -export default ButtonTertiary; diff --git a/client/src/components/ChannelAbout/index.jsx b/client/src/components/ChannelAbout/index.jsx index 2e04f18f..2d2a8f46 100644 --- a/client/src/components/ChannelAbout/index.jsx +++ b/client/src/components/ChannelAbout/index.jsx @@ -2,8 +2,9 @@ import React from 'react'; const ChannelAbout = () => { return ( -
-

Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting important events, or making a public repository for cat gifs (password: '1234'), try creating a channel for it!

+
+

Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends.

+

You can create 1 channel, or 100, so whether you're documenting important events, or making a public repository for cat gifs (password: '1234'), try creating a channel for it!

); }; diff --git a/client/src/components/ChannelSelectDropdown/index.jsx b/client/src/components/ChannelSelectDropdown/index.jsx index fee212c7..2079c05c 100644 --- a/client/src/components/ChannelSelectDropdown/index.jsx +++ b/client/src/components/ChannelSelectDropdown/index.jsx @@ -5,7 +5,6 @@ const ChannelSelectDropdown = ({ selectedChannel, handleSelection, loggedInChann return ( + > + +
+ +
+
); } } diff --git a/client/src/components/Column/index.jsx b/client/src/components/Column/index.jsx deleted file mode 100644 index dcd2e2bc..00000000 --- a/client/src/components/Column/index.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -class Column extends React.Component { - render () { - return ( -
- {this.props.children} -
- ); - } -} - -export default Column; diff --git a/client/src/components/DropzoneDropItDisplay/index.jsx b/client/src/components/DropzoneDropItDisplay/index.jsx index beaf820b..e6798093 100644 --- a/client/src/components/DropzoneDropItDisplay/index.jsx +++ b/client/src/components/DropzoneDropItDisplay/index.jsx @@ -3,7 +3,7 @@ import React from 'react'; const DropzoneDropItDisplay = () => { return (
-

Drop it.

+ Drop it.
); } diff --git a/client/src/components/DropzoneInstructionsDisplay/index.jsx b/client/src/components/DropzoneInstructionsDisplay/index.jsx index eb49ae98..c72f1127 100644 --- a/client/src/components/DropzoneInstructionsDisplay/index.jsx +++ b/client/src/components/DropzoneInstructionsDisplay/index.jsx @@ -9,15 +9,15 @@ const DropzoneInstructionsDisplay = ({fileError, message}) => { return (
-

{message}

+ {message} -

OR

+ OR { fileError ? (
-

CHOOSE FILE

+ CHOOSE FILE { />
) : ( -

CHOOSE FILE

+ CHOOSE FILE )}
); diff --git a/client/src/components/FormFeedbackDisplay/index.jsx b/client/src/components/FormFeedbackDisplay/index.jsx index 7dd62d7e..9050f4e2 100644 --- a/client/src/components/FormFeedbackDisplay/index.jsx +++ b/client/src/components/FormFeedbackDisplay/index.jsx @@ -1,21 +1,21 @@ import React from 'react'; const FormFeedbackDisplay = ({ errorMessage, defaultMessage }) => { - return ( + return (errorMessage || defaultMessage) ? (
{ errorMessage ? ( -

{errorMessage}

+ {errorMessage} ) : (
{ defaultMessage ? ( -

{defaultMessage}

+ {defaultMessage} ) : ( -

 

+   )}
)}
- ); + ) : null; }; export default FormFeedbackDisplay; diff --git a/client/src/components/HorizontalQuadSplit/index.jsx b/client/src/components/HorizontalQuadSplit/index.jsx deleted file mode 100644 index 1bbbc319..00000000 --- a/client/src/components/HorizontalQuadSplit/index.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import Row from '@components/Row'; - -class HorizontalTriSplit extends React.Component { - render () { - return ( -
-
-
- - {this.props.columnA} - -
-
- - {this.props.columnB} - -
-
-
-
- - {this.props.columnC} - -
-
- - {this.props.columnD} - -
-
-
- ); - } -} - -export default HorizontalTriSplit; diff --git a/client/src/components/HorizontalSplit/index.jsx b/client/src/components/HorizontalSplit/index.jsx index c5151fa3..6bcbe6b4 100644 --- a/client/src/components/HorizontalSplit/index.jsx +++ b/client/src/components/HorizontalSplit/index.jsx @@ -2,13 +2,26 @@ import React from 'react'; class HorizontalSplit extends React.Component { render () { + const { leftSide, rightSide, collapseOnMobile } = this.props; + + let className = 'horizontal-split'; + if (collapseOnMobile) { + className += " horizontal-split--mobile-collapse"; + } + + // If there is no left side, move the right side to the left + // This is mostly for content with no description + // It doesn't need to be on the right side with nothing next to it. + const leftComponent = leftSide || rightSide; + const rightComponent = leftSide ? rightSide : null; + return ( -
-
- {this.props.leftSide} +
+
+ {leftComponent}
-
- {this.props.rightSide} +
+ {rightComponent}
); diff --git a/client/src/components/NavBar/index.jsx b/client/src/components/NavBar/index.jsx index bd1028a3..c58aa22d 100644 --- a/client/src/components/NavBar/index.jsx +++ b/client/src/components/NavBar/index.jsx @@ -10,7 +10,6 @@ class NavBar extends React.Component {
-
diff --git a/client/src/components/NavBarChannelOptionsDropdown/index.jsx b/client/src/components/NavBarChannelOptionsDropdown/index.jsx index 4274df26..20133416 100644 --- a/client/src/components/NavBarChannelOptionsDropdown/index.jsx +++ b/client/src/components/NavBarChannelOptionsDropdown/index.jsx @@ -6,7 +6,6 @@ function NavBarChannelDropdown ({ channelName, handleSelection, defaultSelection