From c3cbc40cbf9b20b3e56e702cbed6a4f98589d384 Mon Sep 17 00:00:00 2001
From: Genar Trias Ortiz <genar@acs.li>
Date: Wed, 13 Nov 2019 02:01:25 +0100
Subject: [PATCH 1/8] lots of ui improvements

---
 .storybook/config.js                          |  1 +
 .storybook/webpack.config.js                  |  7 ++-
 config/cssRules.js                            |  1 -
 package.json                                  |  3 +
 src/components/ArtistView/index.tsx           | 12 ++--
 src/components/Buttons/SearchButton.tsx       |  1 -
 src/components/Sidebar/SidebarContents.tsx    |  2 +-
 src/components/SongView/SongView.tsx          | 35 ++++++-----
 .../Topbar/SearchInput/index.stories.tsx      | 21 +++++++
 src/components/Topbar/SearchInput/index.tsx   | 59 ++++++++++++++++++
 src/components/Topbar/Topbar.spec.tsx         | 39 ------------
 src/components/Topbar/Topbar.styles.ts        | 24 -------
 src/components/Topbar/Topbar.tsx              | 62 ++++++++-----------
 src/components/common/Icon/index.tsx          | 27 ++++++++
 src/components/common/Tag/index.styles.tsx    | 18 ------
 src/components/common/Tag/index.tsx           |  2 +-
 src/styles/App.scss                           |  3 -
 src/styles/cards.scss                         |  7 ---
 src/styles/form.scss                          |  3 -
 src/styles/playlists.scss                     |  2 -
 src/styles/searchBar.scss                     | 36 -----------
 src/styles/settings.scss                      |  4 --
 yarn.lock                                     | 27 ++++++++
 23 files changed, 197 insertions(+), 199 deletions(-)
 create mode 100644 src/components/Topbar/SearchInput/index.stories.tsx
 create mode 100644 src/components/Topbar/SearchInput/index.tsx
 delete mode 100644 src/components/Topbar/Topbar.spec.tsx
 delete mode 100644 src/components/Topbar/Topbar.styles.ts
 create mode 100644 src/components/common/Icon/index.tsx
 delete mode 100644 src/components/common/Tag/index.styles.tsx
 delete mode 100644 src/styles/cards.scss
 delete mode 100644 src/styles/form.scss
 delete mode 100644 src/styles/searchBar.scss

diff --git a/.storybook/config.js b/.storybook/config.js
index 563020c2..4394bff8 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,4 +1,5 @@
 import { configure } from '@storybook/react'
 import '../src/App.css'
+import "font-awesome/css/font-awesome.min.css"
 
 configure(require.context('../src', true, /\.stories\.tsx/), module)
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index d6794e15..b5aa7b69 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -25,7 +25,12 @@ module.exports = async ({ config, mode }) => {
     ...config,
     module: {
       ...config.module,
-      rules: [typescriptRules, ...cssRules]
+      rules: [typescriptRules, ...cssRules,
+        {
+          test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+          loaders: ['file-loader']
+        }
+      ]
     }
   }
 }
diff --git a/config/cssRules.js b/config/cssRules.js
index 625ef748..7fed30e6 100644
--- a/config/cssRules.js
+++ b/config/cssRules.js
@@ -5,7 +5,6 @@ module.exports = [
   // SASS support
   {
     test: /\.scss$/,
-    include: paths.appSrc,
     loaders: ["style-loader", "css-loader", "sass-loader"]
   },
   // "postcss" loader applies autoprefixer to our CSS.
diff --git a/package.json b/package.json
index a4c4bb6a..d2af4c5a 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,9 @@
     "@babel/core": "^7.0.0",
     "@babel/preset-typescript": "^7.6.0",
     "@babel/runtime-corejs2": "^7.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/react-fontawesome": "^0.1.7",
     "@sindresorhus/slugify": "^0.9.0",
     "@storybook/addon-knobs": "^5.2.5",
     "@storybook/react": "^5.2.4",
diff --git a/src/components/ArtistView/index.tsx b/src/components/ArtistView/index.tsx
index a8509c23..7a407111 100644
--- a/src/components/ArtistView/index.tsx
+++ b/src/components/ArtistView/index.tsx
@@ -100,16 +100,16 @@ export default class ArtistView extends React.Component<Props> {
     }
 
     return (
-      <div className={`artist-view ${this.props.className}`}>
+      <div className={`artist-view ${this.props.className} z-50`}>
         <div className='main'>
-          <h2>{ artist.name }</h2>
+          <h2 className='text-center'>{ artist.name }</h2>
           <p dangerouslySetInnerHTML={{__html: extractSummary()}} />
           <ul className='unstyled-list'>
             {
               albumsByArtist.map((albumId) => {
                 return (
-                  <li className='card' key={albumId}>
-                    <h3 className='card-header'>
+                  <li className='mx-10 md:mx-0 z-4 flex flex-col items-center' key={albumId}>
+                    <div className='h-40 w-40 md:h-56 md:w-56'>
                       <CoverImage
                         cover={
                           this.props.collection.rows[songsByAlbum[albumId][0]].cover
@@ -117,6 +117,8 @@ export default class ArtistView extends React.Component<Props> {
                         size='thumbnail'
                         albumName={'N/A'}
                       />
+                    </div>
+                    <h3>
                       <span>{ albums[albumId].name }</span>
                       <button
                         onClick={() => {
@@ -126,7 +128,7 @@ export default class ArtistView extends React.Component<Props> {
                         <i className='fa fa-play' />
                       </button>
                     </h3>
-                    <div className='card-body'>
+                    <div className='card-body mb-10'>
                       { extractSongs(albums[albumId]) }
                     </div>
                   </li>
diff --git a/src/components/Buttons/SearchButton.tsx b/src/components/Buttons/SearchButton.tsx
index 260ae29a..516defc9 100644
--- a/src/components/Buttons/SearchButton.tsx
+++ b/src/components/Buttons/SearchButton.tsx
@@ -22,7 +22,6 @@ const SearchButton = ({dispatch, searchToggled}: Props) => {
   return (
     <Button
       transparent
-      className='search-button button'
       onClick={toggleSearch}
     >
       <i className='fa fa-search'></i>
diff --git a/src/components/Sidebar/SidebarContents.tsx b/src/components/Sidebar/SidebarContents.tsx
index 1d8fa509..e55490f7 100644
--- a/src/components/Sidebar/SidebarContents.tsx
+++ b/src/components/Sidebar/SidebarContents.tsx
@@ -21,7 +21,7 @@ type ContentProps = {
 const SidebarContents = (props: ContentProps) => {
   return (
     <div onClick={() => props.onSetSidebarOpen()}>
-      <h4>genar-radio</h4>
+      <h4 className='text-xl'>genar-radio</h4>
       <ul>
         <QueueMenuItem
           current={inSection(props.location, '(queue)?')}
diff --git a/src/components/SongView/SongView.tsx b/src/components/SongView/SongView.tsx
index d747ee0d..c50ea2e4 100644
--- a/src/components/SongView/SongView.tsx
+++ b/src/components/SongView/SongView.tsx
@@ -5,6 +5,7 @@ import * as React from 'react'
 
 import { getDurationStr } from '../../utils/timeFormatter'
 import Button from '../common/Button'
+import Icon from '../common/Icon'
 import Song from '../../entities/Song'
 import Spinner from '..//Spinner'
 import Tag from '../common/Tag'
@@ -51,31 +52,31 @@ const SongView = (props: Props) => {
             <div>
               <div>
                 <div>
-                  <h2>{ song.title }</h2>
+                  <h2 className='text-lg'>{ song.title }</h2>
                 </div>
               </div>
               <div>
                 <div>
                   <Link to={`/artist/${ song.artist.id }`}>
-                    <h3>{ song.artist.name }</h3>
+                    <h3>
+                      <Icon
+                        icon='faMicrophoneAlt'
+                        className='mr-1 w-8'
+                      />
+                      <span>{ song.artist.name }</span>
+                    </h3>
                   </Link>
                 </div>
               </div>
-              <div>
-                <div className='collapsed'>
-                  <span className='label'><Translate value='song.label.album' /></span>
-                </div>
-                <div>
-                  { song.albumName || 'N/A' }
-                </div>
+              <div className='color-white text-lg'>
+                <Icon
+                  className='mr-1 w-8'
+                  icon='faCompactDisc'
+                />
+                { song.albumName || 'N/A' }
               </div>
               <div>
-                <div className='collapsed'>
-                  <span className='label'><Translate value='song.label.duration' /></span>
-                </div>
-                <div>
-                  { getDurationStr(song.duration) }
-                </div>
+                <Icon icon='faStopwatch' /> { getDurationStr(song.duration) }
               </div>
               <div>
                 <div className='collapsed'>
@@ -97,11 +98,13 @@ const SongView = (props: Props) => {
                 <div className='collapsed'>
                   <span className='label'><Translate value='song.label.providers' /></span>
                 </div>
+                <div>
                   {
                     song.stream.map((provider) => {
                       return (<Tag type='primary' key={provider.service}>{ provider.service }</Tag>)
-                      })
+                    })
                   }
+                </div>
               </div>
 
               <div className='btn-group'>
diff --git a/src/components/Topbar/SearchInput/index.stories.tsx b/src/components/Topbar/SearchInput/index.stories.tsx
new file mode 100644
index 00000000..fd613d4f
--- /dev/null
+++ b/src/components/Topbar/SearchInput/index.stories.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+import SearchInput from './index'
+
+const stories = storiesOf('SearchInput', module);
+
+stories
+  .add(
+    'default',
+    () => (
+      <SearchInput
+        ref={React.createRef()}
+        loading={false}
+        searchToggled={true}
+        onFocus={() => console.log('on focus')}
+        onSearchChange={() => console.log('on setSearchChange')}
+        onBlur={() => console.log('on onBlur')}
+        value={'some value'}
+      />
+    )
+  )
diff --git a/src/components/Topbar/SearchInput/index.tsx b/src/components/Topbar/SearchInput/index.tsx
new file mode 100644
index 00000000..a1ba4015
--- /dev/null
+++ b/src/components/Topbar/SearchInput/index.tsx
@@ -0,0 +1,59 @@
+import { I18n } from 'react-redux-i18n'
+import * as React from 'react'
+import classNames from 'classnames'
+
+type Props = {
+  ref: any,
+  loading: boolean,
+  searchToggled: boolean,
+  onSearchChange: (event:  React.FormEvent<HTMLInputElement>) => void,
+  onFocus: () => void,
+  onBlur: () => void,
+  value: string,
+}
+
+const SearchInput = (props: Props) => {
+  if (!props.searchToggled) {
+    return null;
+  }
+
+  const classes = classNames({
+    'search-bar': true,
+    ui: true,
+    'w-full': true,
+    'p-3': true,
+    'bg-transparent': true,
+    'text-blue-100': true,
+    'font-sans': true,
+    'focus:outline-none': true,
+    huge: true,
+    icon: true,
+    input: true,
+    inverted: true,
+    loading: props.loading,
+    action: true
+  })
+
+  return (
+    <div
+      className={'w-full flex bg-transparent border-b-4 border-blue-400 items-center'}
+    >
+      <input
+        className={classes}
+        autoFocus
+        ref={props.ref}
+        onChange={props.onSearchChange}
+        onFocus={props.onFocus}
+        onBlur={props.onBlur}
+        value={props.value}
+        placeholder={ I18n.t('placeholder.search') }
+        type='text'
+      />
+      <div className='p-3'>
+        { props.loading ? <i className='icon fa fa-spinner fa-pulse'></i> : <i className='icon search'></i> }
+      </div>
+    </div>
+  )
+}
+
+export default SearchInput
diff --git a/src/components/Topbar/Topbar.spec.tsx b/src/components/Topbar/Topbar.spec.tsx
deleted file mode 100644
index 5d90936f..00000000
--- a/src/components/Topbar/Topbar.spec.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react'
-import { shallow } from 'enzyme'
-import configureEnzyme from '../../tests/configureEnzyme'
-import Topbar from './Topbar'
-
-configureEnzyme()
-
-const setup = (customProps: any) => {
-  const defaultProps = {
-    dispatch: () => {},
-    loading: false,
-    searchToggled: true,
-    playlist: {}
-  }
-
-  const props = {...defaultProps, ...customProps}
-
-  const enzymeWrapper = shallow(<Topbar {...props}/>)
-
-  return {
-    props,
-    enzymeWrapper,
-  }
-}
-
-describe('Topbar', () => {
-  it('renders without crashing', () => {
-    const { enzymeWrapper } = setup({})
-    expect(enzymeWrapper.find('.search-bar').exists()).toBe(true)
-    expect(enzymeWrapper.find('.search-bar > input').exists()).toBe(true)
-    enzymeWrapper.find('input').simulate('change', {currentTarget: {value: 'Pink Floyd'}});
-    expect(enzymeWrapper.find('i.search.icon').exists()).toBe(true)
-  })
-
-  it('should render loading spinner icon while loading', () => {
-    const { enzymeWrapper } = setup({loading: true})
-    expect(enzymeWrapper.find('.search-bar.loading').exists()).toBe(true)
-  })
-})
diff --git a/src/components/Topbar/Topbar.styles.ts b/src/components/Topbar/Topbar.styles.ts
deleted file mode 100644
index 84d8ecf5..00000000
--- a/src/components/Topbar/Topbar.styles.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from '@emotion/styled'
-
-const TopbarContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  overflow: hidden;
-  z-index: 1;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-  grid-area: topbar;
-  align-items: center;
-`
-
-const TopbarContents = styled.div`
-  display: flex;
-  justify-content: flex-end;
-`
-
-export {
-  TopbarContainer,
-  TopbarContents
-}
diff --git a/src/components/Topbar/Topbar.tsx b/src/components/Topbar/Topbar.tsx
index 83066eef..9fbb2c1f 100644
--- a/src/components/Topbar/Topbar.tsx
+++ b/src/components/Topbar/Topbar.tsx
@@ -1,13 +1,10 @@
-import * as React from 'react'
-import KeyHandler, { KEYPRESS } from 'react-key-handler'
 import { I18n } from 'react-redux-i18n'
+import KeyHandler, { KEYPRESS } from 'react-key-handler'
+import * as React from 'react'
+
+import SearchInput from './SearchInput'
 import SidebarButton from '../Buttons/SidebarButton'
 import Title from './Title'
-import {
-  TopbarContainer,
-  TopbarContents
-} from './Topbar.styles'
-
 import * as types from '../../constants/ActionTypes'
 
 type State = {
@@ -40,6 +37,7 @@ class Topbar extends React.Component<Props, State> {
     super(props);
 
     this.props = props
+    this.searchInput = React.createRef()
     this.timer = null
   }
 
@@ -87,51 +85,41 @@ class Topbar extends React.Component<Props, State> {
     this.setState({focus: true})
   }
 
-  renderSearch = (props: Props) => {
-    if (!props.searchToggled) {
-      return null;
-    }
-
-    return (
-      <div
-        className={`search-bar ui huge action icon input inverted ${this.props.loading ? 'loading': ''}`}
-      >
-        <input
-          autoFocus
-          ref={(input) => { this.searchInput = input }}
-          onChange={this.onSearchChange}
-          onFocus={this.onFocus}
-          onBlur={this.onFocusOut}
-          value={this.props.searchTerm}
-          placeholder={ I18n.t('placeholder.search') }
-          type='text'
-        />
-        { this.props.loading ? <i className='icon fa fa-spinner fa-pulse'></i> : <i className='icon search'></i> }
-      </div>
-    )
-  }
-
   render() {
-    const { children, title } = this.props
+    const {
+      children,
+      title,
+      searchTerm,
+      searchToggled,
+      loading
+    } = this.props
 
     const childrenWithProps = React.Children.map(children, child =>
       React.cloneElement(child, { dispatch: this.props.dispatch })
     )
 
     return (
-      <TopbarContainer>
+      <div className='flex justify-between overflow-hidden z-10 items-center' style={{gridArea: 'topbar'}}>
         <SidebarButton />
         <KeyHandler
           keyEventName={KEYPRESS}
           keyValue='/'
           onKeyHandle={this.setFocus}
         />
-        { this.renderSearch(this.props) }
+          <SearchInput
+            searchToggled={searchToggled}
+            loading={loading}
+            ref={this.searchInput}
+            onSearchChange={this.onSearchChange}
+            onFocus={this.onFocus}
+            onBlur={this.onFocusOut}
+            value={searchTerm}
+          />
         {  !this.state.focus && !this.props.searchToggled  ? <Title title={title} onClick={this.setSearchOn} /> : null }
-        <TopbarContents>
+        <div className='flex justify-end'>
           {  !this.state.focus ? childrenWithProps : null }
-        </TopbarContents>
-      </TopbarContainer>
+        </div>
+      </div>
     )
   }
 }
diff --git a/src/components/common/Icon/index.tsx b/src/components/common/Icon/index.tsx
new file mode 100644
index 00000000..1d890cb5
--- /dev/null
+++ b/src/components/common/Icon/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+import {
+  faCompactDisc,
+  faStopwatch,
+  faMicrophoneAlt
+} from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+
+const icons = {
+  faCompactDisc: faCompactDisc,
+  faStopwatch: faStopwatch,
+  faMicrophoneAlt: faMicrophoneAlt
+}
+
+type Props = {
+  icon: keyof typeof icons,
+  className: string
+}
+
+const Icon = (props: Props) => {
+  return (
+    <FontAwesomeIcon className={props.className} icon={icons[props.icon]} />
+  )
+}
+
+export default Icon
diff --git a/src/components/common/Tag/index.styles.tsx b/src/components/common/Tag/index.styles.tsx
deleted file mode 100644
index 2a02126b..00000000
--- a/src/components/common/Tag/index.styles.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import styled from '@emotion/styled'
-import fonts from '../../../styles/fonts'
-import colors from '../../../styles/colors'
-import sizes from '../../../styles/sizes'
-
-const Tag = styled.div`
-  line-height: 1.5;
-  padding: 4px;
-  color: white;
-  background-color: ${props => colors[props.type]};
-  font-family: ${fonts.fontFamily};
-  font-size: ${fonts.small};
-  border-radius: ${sizes.base};
-`
-
-export {
-  Tag
-}
diff --git a/src/components/common/Tag/index.tsx b/src/components/common/Tag/index.tsx
index 7b648a08..32b23af6 100644
--- a/src/components/common/Tag/index.tsx
+++ b/src/components/common/Tag/index.tsx
@@ -7,7 +7,7 @@ type Props = {
 
 const Tag = (props: Props) => {
   return (
-    <div className={props.type}>
+    <div className='px-2 text-blue-300 border border-blue-800 text-sm w-auto inline-block'>
       { props.children }
     </div>
   )
diff --git a/src/styles/App.scss b/src/styles/App.scss
index f1a49753..4c9504df 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -10,9 +10,7 @@ $fa-font-path: "./fonts" !default;
 @import './alerts.scss';
 @import './buttons.scss';
 @import './links.scss';
-@import './searchBar.scss';
 @import './icons.scss';
-@import './form.scss';
 @import './player.scss';
 @import './spinner.scss';
 @import './song-view.scss';
@@ -26,7 +24,6 @@ $fa-font-path: "./fonts" !default;
 @import './audio-canvas.scss';
 @import './lazy-image.scss';
 @import './toggle.scss';
-@import './cards.scss';
 @import './playlists.scss';
 
 html, body {
diff --git a/src/styles/cards.scss b/src/styles/cards.scss
deleted file mode 100644
index f7c84d36..00000000
--- a/src/styles/cards.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.card {
-  background: $greyscale-darker1;
-}
-
-.card-header {
-  padding: 10px;
-}
diff --git a/src/styles/form.scss b/src/styles/form.scss
deleted file mode 100644
index f02bb53d..00000000
--- a/src/styles/form.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-input[type=text] {
-  @extend .form-control;
-}
diff --git a/src/styles/playlists.scss b/src/styles/playlists.scss
index 3f66e21a..439ba571 100644
--- a/src/styles/playlists.scss
+++ b/src/styles/playlists.scss
@@ -2,8 +2,6 @@
   @extend .main;
 
   .card {
-    margin-bottom: 20px;
-
     .badge {
       float: right;
     }
diff --git a/src/styles/searchBar.scss b/src/styles/searchBar.scss
deleted file mode 100644
index 7cba87a3..00000000
--- a/src/styles/searchBar.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.search-bar {
-
-  &.ui.input {
-    display: block;
-    position: relative;
-  }
-
-  width: 100%;
-  justify-content: center;
-
-  input {
-    width: 100%;
-    border: none;
-    box-shadow: none;
-    grid-area: sidebar;
-    font-size: 2rem;
-    background: transparent;
-
-    &:focus {
-      background: transparent;
-      border: none;
-      box-shadow: none;
-    }
-  }
-
-  .icon {
-    font-size: 2rem;
-    position: absolute;
-    display: inline;
-    right: 10px;
-    top: 13px;
-    line-height: 38px;
-  }
-  border-bottom: solid 4px $greyscale-lighter2;
-}
-
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 4d9516b8..040039cc 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -12,10 +12,6 @@
     margin-bottom: 20px;
   }
 
-  .card {
-    margin-bottom: 20px;
-  }
-
   @include media-breakpoint-up(md) {
     label {
       text-align: right;
diff --git a/yarn.lock b/yarn.lock
index fed180aa..9e39e39f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1031,6 +1031,32 @@
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc"
 
+"@fortawesome/fontawesome-common-types@^0.2.25":
+  version "0.2.25"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz#6df015905081f2762e5cfddeb7a20d2e9b16c786"
+  integrity sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q==
+
+"@fortawesome/fontawesome-svg-core@^1.2.25":
+  version "1.2.25"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.25.tgz#24b03391d14f0c6171e8cad7057c687b74049790"
+  integrity sha512-MotKnn53JKqbkLQiwcZSBJVYtTgIKFbh7B8+kd05TSnfKYPFmjKKI59o2fpz5t0Hzl35vVGU6+N4twoOpZUrqA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.25"
+
+"@fortawesome/free-solid-svg-icons@^5.11.2":
+  version "5.11.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz#2f2f1459743a27902b76655a0d0bc5ec4d945631"
+  integrity sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.25"
+
+"@fortawesome/react-fontawesome@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.7.tgz#c004ca75c15c5a1218101e8f042b8da8dec0c4b5"
+  integrity sha512-AHWSzOsHBe5vqOkrvs+CKw+8eLl+0XZsVixOWhTPpGpOA8WQUbVU6J9cmtAvTaxUU5OIf+rgxxF8ZKc3BVldxg==
+  dependencies:
+    prop-types "^15.5.10"
+
 "@hapi/address@2.x.x":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.0.0.tgz#9f05469c88cb2fd3dcd624776b54ee95c312126a"
@@ -6484,6 +6510,7 @@ follow-redirects@^1.0.0:
 font-awesome@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
+  integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=
 
 for-in@^0.1.3:
   version "0.1.8"
-- 
GitLab


From cbd58c7b72ce683bc8c55dbd78eb83cf6be6826c Mon Sep 17 00:00:00 2001
From: Genar Trias Ortiz <genar@acs.li>
Date: Wed, 13 Nov 2019 02:01:28 +0100
Subject: [PATCH 2/8] 0.10.19

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d2af4c5a..ccaa40be 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "genar-radio",
-  "version": "0.10.18",
+  "version": "0.10.19",
   "private": true,
   "dependencies": {
     "@babel/core": "^7.0.0",
-- 
GitLab


From b22fdfc7cff5465e7f4d91d12786d2e804f3cf04 Mon Sep 17 00:00:00 2001
From: Genar Trias Ortiz <genar@acs.li>
Date: Wed, 13 Nov 2019 02:33:22 +0100
Subject: [PATCH 3/8] more ui fixes

---
 src/components/ArtistView/index.tsx   | 50 +++++++++++--------
 src/components/SongView/SongView.tsx  | 69 ++++++++++-----------------
 src/components/Topbar/Title/index.tsx |  2 +-
 3 files changed, 54 insertions(+), 67 deletions(-)

diff --git a/src/components/ArtistView/index.tsx b/src/components/ArtistView/index.tsx
index 7a407111..6d763510 100644
--- a/src/components/ArtistView/index.tsx
+++ b/src/components/ArtistView/index.tsx
@@ -1,11 +1,12 @@
-import * as React from 'react'
 import { Dispatch } from 'redux'
 import { Redirect } from 'react-router-dom'
+import * as React from 'react'
 
-import Song from '../../entities/Song'
 import Artist from '../../entities/Artist'
-import SongRow from '../MusicTable/SongRow'
+import Button from '../common/Button'
 import CoverImage from '../MusicTable/CoverImage'
+import Song from '../../entities/Song'
+import SongRow from '../MusicTable/SongRow'
 import * as types from '../../constants/ActionTypes'
 
 type Props = {
@@ -102,33 +103,40 @@ export default class ArtistView extends React.Component<Props> {
     return (
       <div className={`artist-view ${this.props.className} z-50`}>
         <div className='main'>
-          <h2 className='text-center'>{ artist.name }</h2>
+          <h2 className='text-center text-xl'>{ artist.name }</h2>
           <p dangerouslySetInnerHTML={{__html: extractSummary()}} />
           <ul className='unstyled-list'>
             {
-              albumsByArtist.map((albumId) => {
+              albumsByArtist.map((albumId: string) => {
                 return (
-                  <li className='mx-10 md:mx-0 z-4 flex flex-col items-center' key={albumId}>
-                    <div className='h-40 w-40 md:h-56 md:w-56'>
-                      <CoverImage
-                        cover={
-                          this.props.collection.rows[songsByAlbum[albumId][0]].cover
-                        }
-                        size='thumbnail'
-                        albumName={'N/A'}
-                      />
-                    </div>
-                    <h3>
-                      <span>{ albums[albumId].name }</span>
-                      <button
+                  <li className='mx-0 z-4 flex flex-col md:flex-row items-center md:items-start mb-16' key={albumId}>
+                    <div className='flex flex-col items-center md:mr-8'>
+                      <h3 className='text-lg mb-2'>{ albums[albumId].name }</h3>
+                      <div
+                        className='h-56 w-56 mb-2 md:h-56 md:w-56 cursor-pointer'
+                        onClick={() => {
+                          this.props.dispatch({type: types.ADD_ALBUM_TO_PLAYLIST, albumId })
+                        }}
+                      >
+                        <CoverImage
+                          cover={
+                            this.props.collection.rows[songsByAlbum[albumId][0]].cover
+                          }
+                          size='thumbnail'
+                          albumName={'N/A'}
+                        />
+                      </div>
+
+                      <Button
+                        transparent
                         onClick={() => {
                           this.props.dispatch({type: types.ADD_ALBUM_TO_PLAYLIST, albumId })
                         }}
                       >
                         <i className='fa fa-play' />
-                      </button>
-                    </h3>
-                    <div className='card-body mb-10'>
+                      </Button>
+                    </div>
+                    <div className='w-100'>
                       { extractSongs(albums[albumId]) }
                     </div>
                   </li>
diff --git a/src/components/SongView/SongView.tsx b/src/components/SongView/SongView.tsx
index c50ea2e4..9215812e 100644
--- a/src/components/SongView/SongView.tsx
+++ b/src/components/SongView/SongView.tsx
@@ -50,64 +50,43 @@ const SongView = (props: Props) => {
         <div className="w-full lg:w1/2 p-6 content">
           <div>
             <div>
-              <div>
-                <div>
-                  <h2 className='text-lg'>{ song.title }</h2>
-                </div>
+              <h2 className='text-2xl'>{ song.title }</h2>
+              <div className='mt-2'>
+                <Link to={`/artist/${ song.artist.id }`}>
+                  <h3>
+                    <Icon
+                      icon='faMicrophoneAlt'
+                      className='mr-1 w-8'
+                    />
+                    <span>{ song.artist.name }</span>
+                  </h3>
+                </Link>
               </div>
-              <div>
-                <div>
-                  <Link to={`/artist/${ song.artist.id }`}>
-                    <h3>
-                      <Icon
-                        icon='faMicrophoneAlt'
-                        className='mr-1 w-8'
-                      />
-                      <span>{ song.artist.name }</span>
-                    </h3>
-                  </Link>
-                </div>
-              </div>
-              <div className='color-white text-lg'>
+              <div className='color-white text-lg mt-2'>
                 <Icon
                   className='mr-1 w-8'
                   icon='faCompactDisc'
                 />
                 { song.albumName || 'N/A' }
               </div>
-              <div>
+              <div className='mt-4'>
                 <Icon icon='faStopwatch' /> { getDurationStr(song.duration) }
               </div>
-              <div>
-                <div className='collapsed'>
-                  <span className='label'><Translate value='song.label.genre' /></span>
-                </div>
-                <div>
-                  { song.genre }
-                </div>
+              <div className='mt-2'>
+                <Tag>{ song.genre }</Tag>
               </div>
-              <div>
-                <div className='collapsed'>
-                  <span className='label'><Translate value='song.label.playCount' /></span>
-                </div>
-                <div>
-                  { song.playCount || 0 }
-                </div>
+              <div className='mt-2'>
+                <Translate value='song.label.played' /> { song.playCount || 0 } <Translate value='song.label.times' />
               </div>
-              <div>
-                <div className='collapsed'>
-                  <span className='label'><Translate value='song.label.providers' /></span>
-                </div>
-                <div>
-                  {
-                    song.stream.map((provider) => {
-                      return (<Tag type='primary' key={provider.service}>{ provider.service }</Tag>)
-                    })
-                  }
-                </div>
+              <div className='mt-2'>
+                {
+                  song.stream.map((provider) => {
+                    return (<Tag type='primary' key={provider.service}>{ provider.service }</Tag>)
+                  })
+                }
               </div>
 
-              <div className='btn-group'>
+              <div className='btn-group mt-10'>
                 <Button
                   onClick={() => {
                     props.dispatch({type: types.SET_CURRENT_PLAYING, songId: song.id})
diff --git a/src/components/Topbar/Title/index.tsx b/src/components/Topbar/Title/index.tsx
index 5d4ceb9f..7eb38cdf 100644
--- a/src/components/Topbar/Title/index.tsx
+++ b/src/components/Topbar/Title/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 
 const Title = (props: { onClick: () => void, title?: string }) => {
   return (
-    <div>
+    <div className='text-2xl'>
       <h2 onClick={props.onClick}>
         { props.title }
       </h2>
-- 
GitLab


From 19e4a9f717f95a1f175278686d2db8ec8465ba10 Mon Sep 17 00:00:00 2001
From: Genar Trias Ortiz <genar@acs.li>
Date: Wed, 13 Nov 2019 02:33:26 +0100
Subject: [PATCH 4/8] 0.10.20

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ccaa40be..9d8c63cd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "genar-radio",
-  "version": "0.10.19",
+  "version": "0.10.20",
   "private": true,
   "dependencies": {
     "@babel/core": "^7.0.0",
-- 
GitLab


From 6c9e0dfb2624bcc8ce622b519aa7a561ba31f2f3 Mon Sep 17 00:00:00 2001
From: Genar Trias Ortiz <genar@acs.li>
Date: Wed, 13 Nov 2019 09:53:38 +0100
Subject: [PATCH 5/8] fix spec

---
 src/components/common/Icon/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/Icon/index.tsx b/src/components/common/Icon/index.tsx
index 1d890cb5..6f59818b 100644
--- a/src/components/common/Icon/index.tsx
+++ b/src/components/common/Icon/index.tsx
@@ -15,7 +15,7 @@ const icons = {
 
 type Props = {
   icon: keyof typeof icons,
-  className: string
+  className?: string
 }
 
 const Icon = (props: Props) => {
-- 
GitLab


From b9a3f650de9933d65ef4ad96a0c7aeb153de8e49 Mon Sep 17 00:00:00 2001
From: Genar Trias Ortiz <genar@acs.li>
Date: Wed, 13 Nov 2019 09:53:43 +0100
Subject: [PATCH 6/8] 0.10.21

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9d8c63cd..a8d07824 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "genar-radio",
-  "version": "0.10.20",
+  "version": "0.10.21",
   "private": true,
   "dependencies": {
     "@babel/core": "^7.0.0",
-- 
GitLab


From 1ac6c2831303448954e40b3ba133bf9082d9c510 Mon Sep 17 00:00:00 2001
From: Genar Trias Ortiz <genar@acs.li>
Date: Thu, 14 Nov 2019 00:09:51 +0100
Subject: [PATCH 7/8] hello decentraplayer

---
 .gitlab-ci.yml                               |  4 +-
 src/components/Importer.tsx                  |  2 +-
 src/components/MusicTable/ContextualMenu.tsx |  2 +-
 src/components/Playlists/Playlist.tsx        |  2 -
 src/components/Queue.tsx                     |  1 -
 src/components/Settings/ProviderButton.tsx   |  3 +-
 src/components/Settings/ProviderForm.tsx     |  1 -
 src/components/Settings/Settings.tsx         | 16 +++---
 src/components/Settings/SettingsForm.tsx     |  2 +-
 src/components/common/Button/index.tsx       |  9 ++--
 src/components/common/Tag/index.tsx          |  7 +++
 src/styles/App.scss                          |  1 -
 src/styles/buttons.scss                      | 51 --------------------
 src/styles/settings.scss                     | 24 +--------
 14 files changed, 28 insertions(+), 97 deletions(-)
 delete mode 100644 src/styles/buttons.scss

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 7a8a7d61..9ac6982d 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -19,11 +19,11 @@ deploy:
   - yarn
   - yarn build
   - cp build/index.html build/200.html # Creating fallback page
-  - node_modules/.bin/surge build genar-radio.surge.sh
+  - node_modules/.bin/surge build decentraplayer.surge.sh
   only:
   - tags
   variables:
     SURGE_LOGIN: $SURGE_LOGIN
     SURGE_TOKEN: $SURGE_TOKEN
-    PUBLIC_URL: https://genar-radio.surge.sh
+    PUBLIC_URL: https://decentraplayer.surge.sh
     REACT_APP_VERSION: $CI_COMMIT_TAG
diff --git a/src/components/Importer.tsx b/src/components/Importer.tsx
index 0679b6b4..279b929d 100644
--- a/src/components/Importer.tsx
+++ b/src/components/Importer.tsx
@@ -80,7 +80,7 @@ export default class Importer extends React.Component<Props> {
           name='import-playlist'
           ref={this.fileInput}
         />
-        <Button className='btn btn-info' onClick={this.startImport.bind(this)}>Start import</Button>
+        <Button onClick={this.startImport.bind(this)}>Start import</Button>
         { message }
       </React.Fragment>
     )
diff --git a/src/components/MusicTable/ContextualMenu.tsx b/src/components/MusicTable/ContextualMenu.tsx
index 7e36e09a..6794db88 100644
--- a/src/components/MusicTable/ContextualMenu.tsx
+++ b/src/components/MusicTable/ContextualMenu.tsx
@@ -28,7 +28,7 @@ const ContextualMenu = (props: MenuProps) => {
 
   return (
     <React.Fragment>
-      <MenuProvider event="onClick" id={`context-menu-${song.id}`} className='media-actions btn'>
+      <MenuProvider event="onClick" id={`context-menu-${song.id}`} className='media-actions'>
         <i className='fa fa-ellipsis-v' />
       </MenuProvider>
       <Menu id={`context-menu-${song.id}`} className='song-menu'>
diff --git a/src/components/Playlists/Playlist.tsx b/src/components/Playlists/Playlist.tsx
index ec957beb..e026be55 100644
--- a/src/components/Playlists/Playlist.tsx
+++ b/src/components/Playlists/Playlist.tsx
@@ -36,7 +36,6 @@ const Playlist = (props: Props) => {
 
         <div className='btn-group'>
           <Button
-            className='btn-secondary'
             onClick={() => setShowSongs(!showSongs)}
           >
             Show songs
@@ -44,7 +43,6 @@ const Playlist = (props: Props) => {
           </Button>
 
           <Button
-            className='btn-info'
             onClick={() => {
               dispatch({
                 type: types.ADD_SONGS_TO_QUEUE_BY_ID,
diff --git a/src/components/Queue.tsx b/src/components/Queue.tsx
index 4de569dd..b479606f 100644
--- a/src/components/Queue.tsx
+++ b/src/components/Queue.tsx
@@ -44,7 +44,6 @@ const Queue = (props: Props) => {
         <BodyMessage message={'Add songs from the collection or search for new ones'} />
 
         <Link
-          className='btn'
           to="/collection"
           title="collection"
         >
diff --git a/src/components/Settings/ProviderButton.tsx b/src/components/Settings/ProviderButton.tsx
index 7ee34373..27c54807 100644
--- a/src/components/Settings/ProviderButton.tsx
+++ b/src/components/Settings/ProviderButton.tsx
@@ -19,11 +19,10 @@ const ProviderButton = (props: Props) => {
   return (
     <Button
       inverted
-      className='btn btn-secondary'
       onClick={onClick}
       title={ props.providerKey }
     >
-      <i className='fa fa-plus'></i>
+      <i className='fa fa-plus mr-2'></i>
       <Translate value={`buttons.addProvider.${props.providerKey}`} />
     </Button>
   )
diff --git a/src/components/Settings/ProviderForm.tsx b/src/components/Settings/ProviderForm.tsx
index b06837f8..188341b3 100644
--- a/src/components/Settings/ProviderForm.tsx
+++ b/src/components/Settings/ProviderForm.tsx
@@ -18,7 +18,6 @@ const ProviderForm = (props: ProviderFormProps) => {
     return (
       <div className='float-right'>
         <a
-          className='btn btn-secondary'
           onClick={onClick}
           title={ props.providerKey }
         >
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
index f7ae67e6..9bf1806c 100644
--- a/src/components/Settings/Settings.tsx
+++ b/src/components/Settings/Settings.tsx
@@ -59,26 +59,26 @@ class Settings extends React.Component<Props, State> {
           settings={this.props.settings}
           dispatch={this.props.dispatch}
         />
-        <div className='btn-group'>
-          <Button className='btn btn-info' onClick={this.scanSources} inverted>
+        <div className='my-4'>
+          <Button onClick={this.scanSources} inverted>
             <Translate value="labels.scanSources" />
           </Button>
         </div>
-        <div className='btn-group'>
-          <Button className='btn btn-info' onClick={this.exportCollection} inverted>
+        <div className='my-4'>
+          <Button onClick={this.exportCollection} inverted>
             <Translate value="labels.exportCollection" />
           </Button>
-          <Button className='btn btn-success' onClick={this.toggleImporter} inverted>
+          <Button onClick={this.toggleImporter} inverted>
             <Translate value="labels.importCollection" />
           </Button>
-          <Button className='btn btn-danger' onClick={this.deleteCollection} inverted>
+          <Button onClick={this.deleteCollection} inverted>
             <Translate value="labels.deleteCollection" />
           </Button>
-          <Button className='btn btn-danger' onClick={this.deleteSettings} inverted>
+          <Button onClick={this.deleteSettings} inverted>
             <Translate value="labels.deleteSettings" />
           </Button>
         </div>
-        <div className='btn-group'>
+        <div className='my-4'>
           { ImporterComp }
         </div>
       </div>
diff --git a/src/components/Settings/SettingsForm.tsx b/src/components/Settings/SettingsForm.tsx
index 18b9b43e..59031e21 100644
--- a/src/components/Settings/SettingsForm.tsx
+++ b/src/components/Settings/SettingsForm.tsx
@@ -59,7 +59,7 @@ const SettingsForm = (props: Props) => {
 
             <h2><Translate value="labels.providers" /></h2>
 
-            <div className='btn-group provider-buttons'>
+            <div className='my-3'>
               <ProviderButton providerKey='subsonic' />
               <ProviderButton providerKey='mstream' />
               <ProviderButton providerKey='itunes' />
diff --git a/src/components/common/Button/index.tsx b/src/components/common/Button/index.tsx
index d2234058..7d062eba 100644
--- a/src/components/common/Button/index.tsx
+++ b/src/components/common/Button/index.tsx
@@ -14,12 +14,15 @@ type Props = {
 
 const Button = (props: Props) => {
   const classNames = classnames({
-    'text-blue-100': true,
+    'text-blue-200': true,
     'bg-blue-700': true,
     'p-2': true,
-    'px-3': true,
+    'px-4': true,
     'rounded': true,
-    'border-blue-100': props.inverted,
+    'border': !props.transparent,
+    'border-blue-500': !props.inverted,
+    'border-blue-200': props.inverted,
+    'border-solid': props.inverted,
     'border-transparent': props.transparent,
     'bg-transparent': props.inverted || props.transparent
   })
diff --git a/src/components/common/Tag/index.tsx b/src/components/common/Tag/index.tsx
index 32b23af6..e22a8fc8 100644
--- a/src/components/common/Tag/index.tsx
+++ b/src/components/common/Tag/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import classnames from 'classnames'
 
 type Props = {
   children: any
@@ -6,6 +7,12 @@ type Props = {
 }
 
 const Tag = (props: Props) => {
+  const classes = classnames({
+    border: true,
+    'p-1': true,
+    'pw-2': true
+  })
+
   return (
     <div className='px-2 text-blue-300 border border-blue-800 text-sm w-auto inline-block'>
       { props.children }
diff --git a/src/styles/App.scss b/src/styles/App.scss
index 4c9504df..13c524fd 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -8,7 +8,6 @@ $fa-font-path: "./fonts" !default;
 @import './grid.scss';
 @import './layout.scss';
 @import './alerts.scss';
-@import './buttons.scss';
 @import './links.scss';
 @import './icons.scss';
 @import './player.scss';
diff --git a/src/styles/buttons.scss b/src/styles/buttons.scss
deleted file mode 100644
index abb56b88..00000000
--- a/src/styles/buttons.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.btn,
-button {
-  @extend .btn;
-  color: $primary-color-100;
-  background-color: $primary-color;
-  font-weight: bold;
-
-  &:hover {
-    color: $primary-color-100;
-    background-color: $primary-color-800;
-  }
-
-  &.circle {
-    border-radius: 100%;
-
-    i {
-      margin: 0;
-      display: inline;
-    }
-  }
-
-  &.spaced {
-    margin-right: 5px;
-  }
-
-  &.with-bg {
-  }
-}
-
-.song-menu {
-  button {
-    width: 100%;
-    text-align: left;
-    margin: 0;
-
-    i {
-      margin-right: 10px;
-    }
-  }
-}
-
-.react-contexify {
-  background-color: $greyscale-color !important;
-  border: 0;
-  box-shadow: none !important;
-  padding: 0;
-}
-
-.settings-form button[type=submit] {
-  width: 100%;
-}
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 040039cc..0776f967 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,14 +1,5 @@
 .settings {
-  button {
-    margin-bottom: 40px;
-    max-width: 200px;
-  }
-
-  button[type="submit"] {
-    margin-top: 40px;
-  }
-
-  .provider-buttons {
+  .card {
     margin-bottom: 20px;
   }
 
@@ -30,19 +21,6 @@
     i {
       margin-right: 10px;
     }
-
-    &.provider-buttons {
-      a {
-        background: transparent;
-        cursor: pointer;
-      }
-    }
-
-    button {
-      background: transparent;
-      color: $warning;
-      font-weight: normal;
-    }
   }
 }
 
-- 
GitLab


From 5e1724d2a83ec49efc9227a479b649aebfe6cfc3 Mon Sep 17 00:00:00 2001
From: Genar Trias Ortiz <genar@acs.li>
Date: Thu, 14 Nov 2019 00:12:06 +0100
Subject: [PATCH 8/8] project rename

---
 README.md                                  | 6 +++---
 index.html                                 | 2 +-
 package.json                               | 2 +-
 public/index.html                          | 2 +-
 public/manifest.json                       | 4 ++--
 src/components/Sidebar/SidebarContents.tsx | 6 +++---
 src/providers/SubsonicApiProvider.ts       | 2 +-
 7 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 2339928b..e817c675 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
-# genar-radio
+# decentraplayer
 
-[![pipeline status](https://gitlab.com/gtrias/genar-radio/badges/master/pipeline.svg)](https://gitlab.com/gtrias/genar-radio/commits/master)
+[![pipeline status](https://gitlab.com/decentraplayer/decentraplayer/badges/master/pipeline.svg)](https://gitlab.com/decentraplayer/decentraplayer/commits/master)
 
-* [Online version](http://genar-radio.surge.sh/)
+* [Online version](http://decentraplayer.surge.sh/)
 
 Media player thought to run entirelly in the web browser.
 
diff --git a/index.html b/index.html
index 04ab9845..7c241baa 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 
 <html>
   <head>
-    <title>genar-radio</title>
+    <title>decentraplayer</title>
     <link rel="stylesheet" href="/static/js/main.css">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
diff --git a/package.json b/package.json
index a8d07824..c952cca0 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "genar-radio",
+  "name": "decentraplayer",
   "version": "0.10.21",
   "private": true,
   "dependencies": {
diff --git a/public/index.html b/public/index.html
index 1299e276..37750abe 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>genar-radio</title>
+    <title>decentraplayer</title>
   </head>
   <body>
     <noscript>
diff --git a/public/manifest.json b/public/manifest.json
index a18c8192..020466f0 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "genar-radio",
-  "name": "genar-radio",
+  "short_name": "decentraplayer",
+  "name": "decentraplayer",
   "icons": [
     {
       "src": "logo-small.png",
diff --git a/src/components/Sidebar/SidebarContents.tsx b/src/components/Sidebar/SidebarContents.tsx
index e55490f7..987f7aa1 100644
--- a/src/components/Sidebar/SidebarContents.tsx
+++ b/src/components/Sidebar/SidebarContents.tsx
@@ -21,7 +21,7 @@ type ContentProps = {
 const SidebarContents = (props: ContentProps) => {
   return (
     <div onClick={() => props.onSetSidebarOpen()}>
-      <h4 className='text-xl'>genar-radio</h4>
+      <h4 className='text-xl'>decentraplayer</h4>
       <ul>
         <QueueMenuItem
           current={inSection(props.location, '(queue)?')}
@@ -45,7 +45,7 @@ const SidebarContents = (props: ContentProps) => {
 
       <section className='sidebar-meta'>
         <a
-          href={'https://gitlab.com/gtrias/genar-radio'}
+          href={'https://gitlab.com/decentraplayer/decentraplayer'}
           title="Show me the code"
           target="_blank"
         >
@@ -53,7 +53,7 @@ const SidebarContents = (props: ContentProps) => {
         </a>
 
         <a
-          href={'https://gitlab.com/gtrias/genar-radio/tags'}
+          href={'https://gitlab.com/decentraplayer/decentraplayer/tags'}
           title="Show me the code"
           target="_blank"
         >
diff --git a/src/providers/SubsonicApiProvider.ts b/src/providers/SubsonicApiProvider.ts
index 5a1fadd0..6cf9db82 100644
--- a/src/providers/SubsonicApiProvider.ts
+++ b/src/providers/SubsonicApiProvider.ts
@@ -17,7 +17,7 @@ export default class SubsonicApiProvider implements IMusicProvider {
   providerKey: string
 
   constructor(settings: any, providerKey: string) {
-    const appName = 'genar-radio'
+    const appName = 'decentraplayer'
     const songCount = 1000
     const artistCount = 1000
     this.baseUrl = settings.baseUrl
-- 
GitLab