refactor: dock panel style

close #2535

Author: KochiyaOcean

package-lock.json

@@ -134,7 +134,7 @@
     "request": "^2.88.2",
     "reselect": "^4.1.6",
     "semver": "^7.3.7",
-    "styled-components": "^5.3.5",
+    "styled-components": "^6.1.6",
     "tslib": "^2.4.0",
     "wanakana": "^5.0.2",
     "yargs": "^17.5.1"

package.json

@@ -12,7 +12,7 @@ import {
   getSlotItemBackgroundPath,
 } from 'views/utils/ship-img'
 import classnames from 'classnames'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 
 const ShipAvatarContainer = styled.div`
   align-items: center;

views/components/etc/avatar.es

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState, useCallback } from 'react'
 import { compact } from 'lodash'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 interface ScrollShadowProps {
   children: React.ReactNode

views/components/etc/scroll-shadow.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 
 export const InfoTooltipEntry = styled.div`
   display: flex;

views/components/etc/styled-components.ts

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react'
 import i18next from 'views/env-parts/i18next'
 import { take } from 'lodash'
-import styled, { keyframes, css } from 'styled-components'
+import { styled, keyframes, css } from 'styled-components'
 import { CustomTag } from 'views/components/etc/custom-tag'
 import { ResizeSensor } from 'views/components/etc/resize-sensor'
 import { EventEmitter } from 'views/utils/event-emitter'

views/components/info/alert.tsx

@@ -10,7 +10,7 @@ import { connect } from 'react-redux'
 import { get, padStart } from 'lodash'
 import { gameRefreshPage, gameReload } from 'views/services/utils'
 import { withNamespaces, Trans } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 import { CustomTag } from 'views/components/etc/custom-tag'
 import { Tooltip } from 'views/components/etc/overlay'
 

views/components/info/control.es

@@ -6,7 +6,7 @@ import { createSelector } from 'reselect'
 import { connect } from 'react-redux'
 import { get, map, zip, each } from 'lodash'
 import { withNamespaces } from 'react-i18next'
-import styled, { css, keyframes } from 'styled-components'
+import { styled, css, keyframes } from 'styled-components'
 import { rgba } from 'polished'
 import classNames from 'classnames'
 

views/components/info/map-reminder.es

@@ -1,6 +1,6 @@
 import React, { createRef } from 'react'
 import { Position, OverlayToaster, Intent } from '@blueprintjs/core'
-import styled, { css } from 'styled-components'
+import { styled, css } from 'styled-components'
 import { connect } from 'react-redux'
 import { get } from 'lodash'
 

views/components/info/toast.es

@@ -5,7 +5,7 @@ import FontAwesome from 'react-fontawesome'
 import { connect } from 'react-redux'
 import { get, pick, isEqual, entries, fromPairs, map } from 'lodash'
 import { Trans } from 'react-i18next'
-import styled from 'styled-components'
+import { styled } from 'styled-components'
 import { Responsive as ResponsiveReactGridLayout } from 'react-grid-layout'
 import { ResizeSensor } from '@blueprintjs/core'